1

我正在使用react-data-grid和 redux store 将用户输入的数据保存在网格/表格上​​。为了访问当前状态，我使用了 mapStateToProps 方法中的道具。但是 mapStateToProps 没有提供更新的状态。参考：第 151 到 156 行： https ://github.com/rupav/candis/blob/4bee19750b9449137ad85e99fdc38e1fdb52f996/candis/app/client/app/component/widget/DataEditor.jsx

第 151 行的props.row.update()更新了 redux-store ( rows value)，这不会反映在 mapDispatchToProps Line num 的下一次调用中。156 . 虽然直接访问商店（没有连接），但为我提供了更新的状态：行号。154

我的 ReactDataGrid 组件设置为：

<ReactDataGrid
    enableCellSelect={true}
    columns={props.columns}
    rowGetter={(index) => { return props.rows[index] }}
    rowsCount={props.rows.length}
    rowSelection={{
        showCheckbox: true,
        enableShiftSelect: true,
        onRowsSelected: (rows) => {
            rows.forEach((meta)  => {
                props.row.select(meta.rowIdx, meta.row)
            })
        },
        onRowsDeselected: (rows) => {
            rows.forEach((meta)  => {
                props.row.deselect(meta.rowIdx, meta.row)
            })
        },
        selectBy: { isSelectedKey: 'selected' }
    }}
    onGridRowsUpdated={({ fromRow, toRow, updated }) => {

        props.row.update(fromRow, toRow, updated).then(() => {

            console.log("props.rows are now!", props.rows)  // Still not updated
            // store.getState().dataEditor.rows  // this statement have updated rows, even without using the Promise.

            props.onChange({ columns: props.columns, rows: props.rows })
        })
    }}
/>

而 mapDispatchToProps 和 mapStateToProps 设置是：

const mapStateToProps = (state) => {
  const dataEditor    = state.dataEditor

  return {
       rows: dataEditor.rows,
    columns: dataEditor.columns
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    row: {
      update: (fromRow, toRow, updated) => new Promise ((resolve) => {
        const action = row.update(fromRow, toRow, updated)
        dispatch(action)
        resolve()
      }),
      insert: (position, meta)=> {
        const action = row.insert(position, meta)
        dispatch(action)
      },
      delete: (index, meta)=> {
        const action = row.delete(index, meta)
        dispatch(action)
      },
      select: (rowIdx, row) => {
        const action = row.select(rowIdx, row)
        dispatch(action)
      },
      deselect: (rowIdx, row) => {
        const action = row.deselect(rowIdx, row)
        dispatch(action)
      }
    },
    column: {
      insert: (position, meta)=> {
        const action = column.insert(position, meta)
        dispatch(action)
      },
      delete: (key)=> {
        const action = column.delete(key)
        dispatch(action)
      }
    },
    getResource: () => {
      const action = getResource()
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DataEditor)
4

0 回答 0