当父级传递新的或更新的数据时重新渲染 Table 组件

Question

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

使用此处的示例指南，我在 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;

这几乎是直接从示例页面复制的，除了我没有使用模拟数据，而是传递从父组件获取并作为 prop 传递的数据。但问题是：虽然父组件中的数据确实更新了（最初，获取了一个只有 5 列的瘦表，然后获取了一个包含 20 列的较大表，替换了父组件状态中的第一个表），我的网络应用程序上的 UI 未更新。（我认为是因为表组件的内部状态没有更新？）

在我的示例中，conferenceId是获取的最初 5 列中的 1 列，但是teamMarket是 20 列之一，但不是 5 列初始列之一。尽管父组件获取新数据并重新渲染，但表组件不会更新以在新列中显示新数据。

我正在用这个来动态计算钩子和无头组件，并且希望遵循使用这个库的最佳实践，因为从文档和示例来看，它似乎是一个非常好的和强大的 React 表格​​组件。

编辑

为了快速更新和澄清，父组件触发 2 个单独的异步 Axios 获取来更新相同的父状态变量可能是一个不好的模式。我不知道。正如我所提到的，只是为了澄清一下，第一次提取快速获取数据的精简版本，而第二次提取则获取完整的表。tableData因为父状态会使用新的数据数组进行更新，所以作为prop传递的数组也会发生<MyReactTable7Table />变化。

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

Answer 1

您已向您提供了一个空数组依赖项useMemo，这意味着 的记忆值tableData已创建并分配给data并且永远不会更改。您将需要提供依赖项，指示何时useMemo应重新计算/重新生成该值。

在你的情况下，不需要 2nd useMemo。

所以删除下面的代码并使用tableData

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

像这样：

const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({ columns, data: tableData });