Reactjs 如何在使用Redux（Action+；Reducer）更新数据库中的特定行后重新呈现MaterialTable

假设我们有以下代码：

import React, { useEffect } from "react";
import MaterialTable from "material-table";
import { connect } from "react-redux";
import {
  getLeadsNotValid,
  updateSpecificNotValidLead
} from "../../actions/leads";
import Spinner from "../layout/Spinner";

const MisleadLeadsTable = ({
  getLeadsNotValid,
  loadingData,
  leadsNotValid,
  updateSpecificNotValidLead
}) => {
  useEffect(() => {
    // goes to the action and gets the leads from the DB
    getLeadsNotValid();   
    // eslint-disable-next-line
  }, [getLeadsNotValid]);

  return (
    <div>
      {loadingData ? (
        <Spinner />
      ) : (
        <MaterialTable
          title="Problematic Leads"
          columns={[
            { title: "BusinessName", field: "BusinessName" },
            { title: "City", field: "City" },
            { title: "Rooms", field: "Rooms", type: "numeric" },
            {
              title: "Phone Number",
              field: "PhoneNumberMasque"
            },
            {
              title: "Supplier",
              field: "supplier.name"
            }
          ]}
          data={leadsNotValid}
          editable={{
            onRowUpdate: (newData, oldData) => {
              new Promise(resolve => {
                // Goes to the DB and updates the new data
                updateSpecificNotValidLead(newData);

                // TODO : Needs to re-render the table
              });
            }
          }}
        />
      )}
    </div>
  );
};

const mapStateToProps = state => ({
  loadingData: state.leadReducer.loadingData,
  leadsNotValid: state.leadReducer.leadsNotValid
});

const mapDispatchToProps = { getLeadsNotValid, updateSpecificNotValidLead };

export default connect(mapStateToProps, mapDispatchToProps)(MisleadLeadsTable);

减速器：

import {
  GET_MAIN_LEADS_SUCCESS,
  REQUEST_MAIN_LEADS,
  RELOAD_DATA_MAIN_LEADS_TABLE,
  REQUEST_LEADS_NOT_VALID,
  REQUEST_LEADS_NOT_VALID_SUCCESS,
  UPDATE_A_SINGLE_NOT_VALID_LEAD,
  UPDATED_SUCCESSFULLY_A_NOT_VALID_LEAD_THAT_NOW_IS_VALID
} from "../actions/types";

const initialState = {
  mainLeadsClients: [],
  loadingData: null, // general loader
  reloadMainLeadTable: 0,
  reloadMisleadTable: 0,
  leadsNotValid: []
};

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case REQUEST_LEADS_NOT_VALID:
      return {
        ...state,
        loadingData: true
      };

    case REQUEST_LEADS_NOT_VALID_SUCCESS:
      return {
        ...state,
        loadingData: false,
        leadsNotValid: payload
      };
    case UPDATE_A_SINGLE_NOT_VALID_LEAD:
      return {
        ...state,
        loadingData: true
      };
    case UPDATED_SUCCESSFULLY_A_NOT_VALID_LEAD_THAT_NOW_IS_VALID:
      return {
        ...state,
        reloadMisleadTable: state.reloadMisleadTable + 1,
        loadingData: false
      };


    // ... more 

    default:
      return state;
  }
}

---

您不在可编辑道具中返回承诺。 这就是为什么没有定义，因为没有承诺被返回。将其更改为：

  editable={{
          onRowUpdate: (newData, oldData) => new Promise(resolve => {
            // Goes to the DB and updates the new data
            updateSpecificNotValidLead(newData);

            // TODO : Needs to re-render the table
          });
      }}

---

这应该可以解决问题。

为什么要从动作中导入getLeadsNotValid和updateSpecificNotValidLead，并从道具中读取它们？在我看来，它们不能从这里的道具中读取

const misleaddstable=（{getLeadsNotValid，loadingData，leadsNotValid，updateSpecificNotValidLead}）

@SuleymanSah:For Redux（这不是问题）。嗯，我从未见过这样的用法。你在哪里找到这个用法的？我觉得很可疑。

  editable={{
          onRowUpdate: (newData, oldData) => new Promise(resolve => {
            // Goes to the DB and updates the new data
            updateSpecificNotValidLead(newData);

            // TODO : Needs to re-render the table
          });
      }}