我是钩子的新手。所以这可能很容易，但我不知道如何解决：
我有一个这样的函数，它需要两个数组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 组件。我该如何解决这个问题:(
这正是 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。
请注意，如果您使用的是 react-table 的排序钩子，则来自用户 Linschlager 的上述回答可能不起作用useSortBy。事实上，作者的最终解决方案并不涉及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 ....
我不知道这是否对任何人都有帮助，但使用上述解决方案对我来说一切都很好。