如何更新反应表的数据

Question

我正在尝试在渲染我的表之前刷新我的 redux 存储中的数据。我调用 useEffect 进行刷新，希望 useSelector 在调用 rest 服务返回时获得更新。我正在提供数据以响应表的 useTable 钩子。当我添加对 useEffect 的调用时，我将页面置于无限刷新中，一遍又一遍地调用 useSelector 数据，但我不明白为什么。有人能指出我正确的方向吗？

这是我的组件，redux 状态函数工作正常。我没有在这里显示实际的表格，只是调用 useTable 钩子。

  function RecurringPublicationTable(props) {
 
      const dispatch = useDispatch();

      // This will get called one time to refresh the recurring publishing data
      useEffect(() => {
        console.log("UseEffect");
        dispatch(getRecurringJobs());
      }, []);

      // This should get the data from store and subscribe.
      const data = useSelector((state) => {
        console.log("UseSelector");
        return state.recurringPublisher.recurringPublishJobs;
      });

 


      const columns = [
      {
        Header: "Name",
        accessor: "recurringJobName",
      },
      {
        Header: "Publish Location",
        accessor: "publishLocation",
      },
    ];

    // This should get the data ready for the table, but fails with max depth exceeded
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
      useTable({
        columns,
        data,
      });

    return <div>Hello Ken</div>;
  }

export default RecurringPublicationTable;

Answer 1

我尝试了这些建议，但结果仍然与不断重新渲染相同。

我发现我可以通过将表格移动到一个组件然后让另一个组件执行 useEffect 然后在效果为时渲染表格组件来获得能够在渲染表格之前刷新数据的预期效果完全的。我也不确定为什么列或数据需要 useMemo。我看到了文档，但它似乎可以在没有包装的情况下工作。

const RecurringPublicationTableContainer = (props) => {
  
    const dispatch = useDispatch();

  const isLoading = useSelector((state) => {
    console.log("The state is:", state);
    return state.recurringPublisher.isrecurringPublishJobsLoading;
  });

  console.log("Are we loading?:",isLoading);

  // This will get called one time to refresh the recurring publishing data
  useEffect(() => {
    console.log("UseEffect");
    dispatch(getRecurringJobs());
  }, []);

  return isLoading ? <p>Loading...</p> : <RecurringPublicationTable />;
};

export default RecurringPublicationTableContainer;

那么RecurringPublicationTable组件就变成了

function RecurringPublicationTable(props) {
  const dispatch = useDispatch();


  const data = useSelector((state) => {
    console.log("The state is:", state);
    return state.recurringPublisher.recurringPublishJobs;
  });

const columns = [
      {
        Header: "Name",
        accessor: "recurringJobName",
      },
      {
        Header: "Publish Location",
        accessor: "publishLocation",
      },
    ];

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable(
      {
        columns,
        data,
      },
      useFilters,
      useSortBy
    );