React.useMemo 不更新数据

Posted 2023-02-22

【中文标题】React.useMemo 不更新数据

【英文标题】：React.useMemo does not update the data

【发布时间】：2020-06-11 14:22:41

【问题描述】：

我是钩子新手。所以这可能很容易，但我不知道如何解决：

我有一个这样的函数，它需要两个数组 columns 和 data 。并且应该记住这些数据，否则它不起作用。 （由 react-table 人员推荐）

function ReactTable(props) 

    const columns = React.useMemo(() => props.columns, [])

    const data = React.useMemo(() => props.data, [])

    return <Table columns=columns data=data />

这很好用，但是当 props 发生变化时（比如从数据数组中添加或删除项目），React.useMemo 不会将更新的数据发送到 Table 组件。我该如何解决这个问题:(

【参考方案1】：

这正是 hooks 中的依赖数组的用途。您可以定义“触发”挂钩更改的变量。在您的情况下，这意味着您需要将代码更改为以下内容：

function ReactTable(props) 
    const columns = React.useMemo(() => props.columns, [props.columns]);
    const data = React.useMemo(() => props.data, [props.data]);

    return <Table columns=columns data=data />

这意味着，每当 props.columns 更改时，columns 变量就会更新，props.data 和 data 的变量也是如此。

【讨论】：

我认为问题在于反应表。排序工作或更新。如果我发送一个空数组，它不会更新，但排序工作正常。如果我发送数组，更新工作但它不会对表进行排序:) LOL

您是否介意提供更多背景信息，甚至可以提供一个小的代码框，以便我们实际复制问题并为您的特定问题找到解决方案？

已解决。谢谢。你救了我。我欠你很多时间！！这是沙盒codesandbox.io/s/stupefied-frog-bwhxl

【参考方案2】：

请注意，如果您使用 react-table 的排序挂钩 useSortBy，则用户 Linschlager 的上述回答可能不起作用。事实上，作者最终的解决方案并没有涉及react.useMemo。

对我来说，无论如何它都成功了。我的列和行数据来自一个查询数据对象，我必须解析它以适应 react-table 的特定方式。

看起来像这样：

function ReportTable( queryData ) 
... other data such as selectedPerLevel ...

 /*                                                                COLUMNS */
  let firstColumn = 
    Header: ' ',
    columns: [
      
        Header: selectedPerLevel.name,
        accessor: 'perLevel',
      ,
    ],
  ;

  let otherColumns = [];
  queryData.weeks.forEach((week) => 
    let otherColumn = 
      Header: week,
      Footer: ' ',
      center: true,
      columns: [
        
          Header: 'Ratio',
          accessor: `ratio$week`,
        ,
        
          Header: 'Count',
          accessor: 'count' + week,
        ,
      ],
    ;

    otherColumns = [...otherColumns, otherColumn];
  );

  /*                                                                  ROWS   */
  let listOfRows = queryData.units.map((unit) => 
    let row = ;

    // for each column
    unit.items.forEach(( week, ratio, count) => 
      row = 
        ...row,
        ['ratio' + week]: ratio,
        ['count' + week]: count,
      ;
    );

    // add the first column-data to the row
    row =  ...row, perLevel: unit.name, id: unit.id ;

    return row;
  );

  const data = React.useMemo(() => listOfRows, [queryData]);
  const columns = React.useMemo(() => [ ...firstColumn , ...otherColumns], [queryData]);

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

return <Table .... 

我不知道这是否对任何人有帮助，但通过上述解决方案对我来说一切都很好。