如何更新反应表的数据

如何解决如何更新反应表的数据

我正在尝试在渲染我的表之前刷新我的 redux 存储中的数据。我调用 useEffect 进行刷新，希望 useSelector 在对其余服务的调用返回时获得更新。我正在提供数据以响应表的 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;

解决方法

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

我发现我可以通过将表格移动到一个组件来获得能够在渲染表格之前刷新数据的理想效果，然后让另一个组件执行 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
    );