0

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

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>
  );
}
4

1 回答 1

0

由于提供的信息有点缺乏，我假设当您更新视频时 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 和瞧，它肯定会起作用。

于 2021-09-12T10:16:49.387 回答