如何更新反应表的数据

Posted 2023-02-22

【中文标题】如何更新反应表的数据

【英文标题】：How to update data for react table

【发布时间】：2021-08-25 00:25:48

【问题描述】：

我正在尝试在渲染我的表之前刷新我的 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;

【问题讨论】：

希望对您有所帮助***.com/questions/58159108/…

我认为您需要将columns 声明移到组件外部，或者使用useMemo 挂钩将其记忆。按原样重新声明每个渲染周期，文档指定 columns 和 data 都需要我记忆 (react-table.tanstack.com/docs/api/useTable#table-options)。

【参考方案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
    );