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

Question

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

使用the examples guide here ，我正在我的 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 个初始列之一。尽管父组件获取新数据并重新渲染，但表组件不会更新以在新列中显示新数据。

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

编辑

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

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

Answer 1

您已为 useMemo 提供了一个空数组依赖项，这意味着 tableData 的内存值已创建并分配给 data，并且从未改变。您需要提供依赖项，指示 useMemo 何时应重新计算/重新生成该值。

就您而言，不需要第二个 useMemo。

因此删除以下代码并仅使用tableData

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

像这样:

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