React.useMemo 不更新数据

Question

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

我有一个这样的函数，它需要两个数组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} />
}

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

Answer 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。