React Material Table onRowAdd新增行后页面不刷新卡顿问题求助

问题根因分析 #

• onRowAdd要求返回的Promise需要在所有数据更新操作完成后再resolve，你的代码提前执行了resolve()，Material Table会提前判定新增操作已结束，后续的状态更新不会触发组件内置刷新逻辑，还会导致内部loading状态异常，触发重载时卡住。
• saveSetting是Saga层的异步方法，你当前是同步调用，没有等待异步操作完成就更新本地状态，容易出现前后端数据不一致问题，也会导致时序错乱。
• 更新本地data数组时，仅拷贝了原有数据，没有把新增的newData插入数组，state中的data实际没有发生变化，自然不会触发页面刷新。

修正后代码示例 #

如果你的saveSetting已经封装为返回Promise的异步Action，推荐使用如下写法：

newData =>
  new Promise(async (resolve) => {
    // 先等待后台保存操作执行完成
    await this.props.saveSetting(newData, this.state.resource, "generalmessage.successMessage");
    // 保存成功后更新本地数据列表
    this.setState(prevState => {
      const data = [...prevState.data, newData];
      return { ...prevState, data };
    }, () => {
      // 本地状态更新完成后再resolve，通知Material Table操作结束
      resolve();
    });
  })

如果暂时没有对saveSetting做Promise封装，可以临时调整执行顺序解决问题：

newData =>
  new Promise(resolve => {
    setTimeout(() => {
      this.setState(prevState => {
        // 把新增数据插入本地数组
        const data = [...prevState.data, newData];
        // 状态更新回调中执行保存和resolve
        setTimeout(() => {
          this.props.saveSetting(newData, this.state.resource, "generalmessage.successMessage");
          resolve();
        }, 0)
        return { ...prevState, data };
      });
    }, 600);
  })

注意事项 #

• 如果调用saveSetting后后台会返回完整的新增行数据（比如带自动生成的主键ID），建议用接口返回的新数据替换手动插入的newData，避免前后端数据不一致。
• 如果你的saveSetting当前是普通的Redux Action没有返回Promise，需要先通过redux-promise中间件或者Saga的回调机制封装为异步Promise，才能用await等待执行结果。
• 不要手动调用页面刷新方法，Material Table会在Promise resolve后自动刷新表格视图。

内容的提问来源于stack exchange，提问作者Raghav