在 React 中执行任何操作后，如何在 material UI table 中自动刷新或呈现更新的 table 数据表单数据库？

Question

这里 useVideos() 为我们提供了数据库中的所有视频。添加新视频后，新条目不会附加到 Material UI table 中，但如果我刷新页面，则会显示该新条目。现在我想在添加操作后显示这个新条目。请帮助我做到这一点！提前致谢。

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;
    default:
      return state;
  }
};

export default function ManageVideos() {
  const { videos, addVideo, updateVideo, deleteVideo } = useVideos("");
  const [videoList, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({
      type: "videos",
      value: videos,
    });
  }, [videos]);

  const columns = [
    { title: "Serial", field: "sl" },
    { title: "Title", field: "title" },
    { title: "Number of Qusetion", field: "noq" },
    { title: "Youtube Video Id", field: "youtubeID" },
  ];

  return (
    <div>
      <MaterialTable
        title="Videos Table"
        data={videoList}
        columns={columns}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                addVideo(newData);
                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                updateVideo(newData);
                resolve();
              }, 1000);
            }),
        }}
      />
    </div>
  );
}

Answer 1

由于提供的信息有点缺乏，我假设当您更新视频时 useEffect 挂钩不起作用（用 consle.log("I'm not working") 检查它，如果它确实有效，那么您可以忽略此答案）。

你可以在这个组件中定义一个简单的状态，我们称之为 reRender 并将值设置为 0，每当用户点击按钮添加视频时你应该调用一个函数将 reRender 的值加 1 (()=>setReRender(prevState=>prevState+1))。在你的 useEffect hook 中，第二个参数传递 reRender。这样，当用户点击提交更改时，reRender 会导致 useEffect 运行并调度以获取新数据。

如果这不起作用，我有一个需要更多工作的解决方案。您将需要使用像 redux 或 context api 这样的状态管理器来在全局级别存储您的状态。您应该将视频存储在那里，并使用多种方式中的一种来访问此组件中的状态（mapStateToProps 或 store.subscribe() 或 ...）。然后把视频全局状态作为第二个参数传给useEffect，voilà，一定可以的

在 React 中执行任何操作后，如何在 material UI table 中自动刷新或呈现更新的 table 数据表单数据库？

How can i auto refresh or render updated table data form database in material UI table after doing any operation in React?

state

reactjs

material-ui

react-data-table-component