React中操作后如何让Material UI表格自动刷新显示数据库最新数据

问题原因 #

新增数据后表格不自动刷新核心是两个原因：

1. addVideo是异步操作，你当前代码没有等待它执行完成就提前resolve，useVideos返回的videos还没更新，依赖videos的useEffect不会触发，本地videoList状态没有同步最新值
2. 你没有主动触发本地状态更新，仅依赖useVideos的响应式更新，若钩子本身没有做数据变更后的状态同步也会出现该问题

修复方案 #

1. 调整reducer支持新增动作 #

新增专门的新增数据处理逻辑，新增后直接更新本地状态，无需等待外部钩子的同步：

const initialState = []; // 修正初始值为空白数组，避免多余空行
const reducer = (state, action) => {
  switch (action.type) {
    case "videos":
      const data = [];
      let cnt = 1;
      action.value.forEach((video, index) => {
        data.push({
          sl: cnt,
          noq: video.noq,
          id: index,
          youtubeID: video.youtubeID,
          title: video.title,
        });
        cnt = cnt + 1;
      });
      return data;
    // 新增addVideo动作处理
    case "addVideo":
      const newEntry = {
        ...action.value,
        sl: state.length + 1,
        id: state.length
      }
      return [...state, newEntry];
    default:
      return state;
  }
};

2. 调整onRowAdd异步逻辑 #

等待addVideo操作完成后再更新本地状态，避免数据不同步：

editable={{
  onRowAdd: (newData) =>
    new Promise(async (resolve, reject) => {
      setTimeout(async () => {
        try {
          // 等待新增操作完成（如果addVideo是请求后端的异步方法必须加await）
          await addVideo(newData);
          // 主动触发本地状态更新，表格会立刻渲染新条目
          dispatch({
            type: "addVideo",
            value: newData
          });
          resolve();
        } catch (e) {
          reject(e);
        }
      }, 1000);
    }),
  // onRowUpdate也可以按相同逻辑修改，实现编辑后即时刷新
  onRowUpdate: (newData) =>
    new Promise(async (resolve, reject) => {
      setTimeout(async () => {
        try {
          await updateVideo(newData);
          // 全量同步最新数据即可
          dispatch({
            type: "videos",
            value: videos
          });
          resolve();
        } catch (e) {
          reject(e);
        }
      }, 1000);
    }),
}}

3. 可选兜底方案 #

如果修改后仍有缓存问题，可以给Material Table增加key属性，强制数据变更时重新渲染组件：

<MaterialTable
  key={videoList.length}
  title="Videos Table"
  data={videoList}
  columns={columns}
  // 其余属性保持不变
/>

内容的提问来源于stack exchange，提问作者Md. Joynal Alam