Reactjs React.UseMoom不会更新数据

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

我有一个这样的函数，它接受两个数组

列

和

数据

。这些数据应该被记录下来，否则它就不起作用了。（由反应台人员推荐）

功能反应表（道具）{
const columns=React.usemo（（）=>props.columns，[]））
const data=React.useMoom（（）=>props.data，[]）
返回
}

---

这可以正常工作，但当道具发生变化时（例如，从数据数组中添加或删除了一个项），React.usemo不会将更新的数据发送到表组件。如何解决此问题：（

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

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} />
}

功能反应表（道具）{
const columns=React.usemo（（）=>props.columns[props.columns]）；
const data=React.useMoom（（）=>props.data[props.data]）；
返回
}

---

这意味着，每当

props.columns

发生变化时，

columns

变量就会更新，而

props.data

和

data

的变量也会更新。请注意，如果您使用的是react表的排序挂钩

useSortBy

，那么上面用户Linschlager给出的答案可能不起作用。事实上，作者的最终解决方案并没有包括ve

react.useMoom

我的列和行数据来自一个查询数据对象，我必须解析该对象以适应react表的具体操作方式

它看起来像这样：

函数报告表（{queryData}）{
…其他数据，如{selectedPerLevel}。。。
/*纵队*/
设第一列={
标题：“”，
栏目：[
{
标题：selectedPerLevel.name，
访问器：“perLevel”，
},
],
};
让otherColumns=[]；
queryData.weeks.forEach（（周）=>{
让otherColumn={
标题：周，
页脚：“”，
中：是的，
栏目：[
{
标题：“比率”，
访问器：`ratio${week}`，
},
{
标题：“计数”，
访问者：“计数”+周，
},
],
};
otherColumns=[…otherColumns，otherColumn]；
});
/*排*/
让listOfRows=queryData.units.map（（单位）=>{
设row={}；
//每列
unit.items.forEach（{周，比率，计数}）=>{
行={
一行
[“比率”+周]：比率，
[计数+周]：计数，
};
});
//将第一列数据添加到行中
row={…row，perLevel:unit.name，id:unit.id}；
返回行；
});
const data=React.useMoom（（）=>listOfRows[queryData]）；
const columns=React.usemo（（）=>[{…firstColumn}，…otherColumns]，[queryData]）；
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
准备工作，
}=useTable（{data，columns}，useSortBy）；
返回我认为与react表有关的问题。排序有效或更新。如果发送空数组，则不会更新，但排序工作正常。如果发送数组，则更新有效，但不会对表排序：）Lol你介意提供更多的背景信息吗，也许甚至是一个小的代码沙盒，让我们能够真正复制这个问题并为你的具体问题找到解决方案？解决了。谢谢。你救了我。我欠你很多时间！！沙盒在这里
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} />
}