Javascript 当父级传递新的或更新的数据时重新呈现表组件

我正在从React表6过渡到React表7，这带来了很多新的变化，因为React表7现在是一个无头实用程序库，使用了很多很多钩子构建。这与表6有很大不同。我对钩子不太熟悉，以前也没有使用过（几个月前我已经读过了），但现在有点被迫进入它们的杂草中，因为我的应用程序严重依赖于这个库

使用，我正在我的react应用程序中设置一个初始表，尝试将该表连接到我的应用程序的实时数据，该数据是通过Axios获取的。然而，我正在为一个最初的重要功能而奋斗——让表组件显示/更新我传递给它的数据，但只有在数据更改之后

为了更清楚，我创建了以下组件：

import React from 'react';
import { useTable } from 'react-table';

function MyReactTable7Table({ tableData }) {

    // 1. Create Columns
    const columns = React.useMemo(
        () => [
            {
                Header: 'Name',
                columns: [
                    {
                        Header: 'Col Available From Start',
                        accessor: 'conferenceId'
                    },
                    {
                        Header: 'Col Avail After Parent Re-Render',
                        accessor: 'teamMarket'
                    }
                ]
            }
        ],
        []
    );

    // 2. Create Data
    const data = React.useMemo(() => tableData, []);

    // 3. Call Use Table
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({ columns, data });

    // 4. Return the HTML Table
    return (<>
        <table {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            // Add the sorting props to control sorting. For this example
                            // we can add them into the header props
                            <th {...column.getHeaderProps()}>
                                {column.render('Header')}
                            </th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map(
                    (row) => {
                        prepareRow(row);
                        return (
                            <tr {...row.getRowProps()}>
                                {row.cells.map(cell => {
                                    return (
                                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                                    );
                                })}
                            </tr>
                        );
                    }
                )}
            </tbody>
        </table>
    </>);
}

export default MyReactTable7Table;

从“React”导入React；
从“反应表”导入{useTable}；
函数MyReactTable7Table（{tableData}）{
//1.创建列
const columns=React.usemo(
() => [
{
标题：“名称”，
栏目：[
{
标题：“从开始可用的列”，
访问者：“conferenceId”
},
{
标题：“父级重新渲染后Col Avail”，
访问者：“团队市场”
}
]
}
],
[]
);
//2.创建数据
const data=React.useMoom（（）=>tableData，[]）；
//3.呼叫使用表
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
预制员
}=useTable（{columns，data}）；
//4.返回HTML表
返回(
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
//添加排序道具来控制排序
//我们可以将它们添加到标题道具中
{column.render（'Header'）}
))}
))}
{rows.map(
（世界其他地区）=>{
准备工作（世界其他地区）；
返回(
{row.cells.map（cell=>{
返回(
{cell.render（'cell'）}
);
})}
);
}
)}
);
}
导出默认MyReactTable7表；

这基本上是直接从示例页面复制的，除了不使用模拟数据之外，我传递的数据是从父组件获取并作为道具传递的。但问题是：尽管来自父组件的数据确实会更新（最初，只获取5列的精简表，然后获取20列的较大表以替换父组件状态中的第一个表），但UI不会在我的web应用程序上更新。（我想是因为表组件的内部状态没有更新？）

在我的例子中，

conferenceId

是最初获取的5列中的1列，而

teamMarket

是20列中的一列，但不是5列中的一列。尽管父组件获取新数据并重新加载，但表组件不会更新以在新列中显示新数据

我正在用这个动态地找出钩子和无头组件，并希望遵循使用这个库的最佳实践，因为从docs+示例来看，它似乎是React的一个非常好和强大的表组件

编辑 为了快速更新和澄清，父组件触发两个单独的异步Axios回迁来更新相同的父状态变量可能是一种不好的模式。我不确定。正如我所提到的，并且只是澄清一下，第一次获取快速获取数据的精简版本，而第二次获取获取完整的表。由于父状态随新数据数组更新，因此作为

tableData

prop传递到

的数组也会更改

---

连接实时数据很困难，因为错误/问题本身与未正确更新的实时数据有关…

您为

useMemo

提供了一个空数组依赖项，这意味着

tableData

的记忆值被创建并分配给

数据，并且永远不会更改。您需要提供依赖项，指示
usemo
何时应重新计算/重新生成该值

在您的情况下，不需要第二个
usemo

    // 2. Create Data - note `tableData` in the useMemo array
    const data = React.useMemo(() => tableData, [tableData]);

因此删除代码下方的并使用
tableData

const data=React.useMoom（（）=>tableData，[]）；

像这样：

const{
可获取的道具，
getTableBodyProps，
校长组，
排，
预制员
}=useTable（{列，数据：tableData}）；
在会话
@gdh
和
@canovice
的基础上，您既可以在状态更改时更新表，也可以使用
usemo

    // 2. Create Data - note `tableData` in the useMemo array
    const data = React.useMemo(() => tableData, [tableData]);

在上面的步骤2中，只需将
tableData
添加到空数组中，其余所有代码都将正常工作，您可以继续使用
usemo

    // 2. Create Data - note `tableData` in the useMemo array
    const data = React.useMemo(() => tableData, [tableData]);

在这个例子中，我们说：

请记住
tableData
（因为渲染成本可能非常高），并仅在
tableData
更改时重新渲染

这里发生的事情与wha非常相似