反应表7-父级传递新数据或更新数据时重新呈现表组件

Question

我正在从React Table 6过渡到7，这带来了许多新的变化，因为React Table 7现在是一个无头的实用程序库，内置了很多钩子。这与React表6有很大不同。我对钩子不太熟悉，以前没有使用过钩子（几个月前我就读过这些钩子就是全部），但是现在有点被迫进入杂草丛中了。其中的一个，因为我的应用程序严重依赖此库。

[使用the examples guide here，我正在我的应用程序中设置一个初始表，尝试将该表连接到我的应用程序的实时数据，该数据是用axios提取的。但是，我正在尽力使用最初的重要功能-使Table组件显示/更新我要传递给它的数据，但仅在数据更改后。

为了使内容更清晰，我创建了以下组件：

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;

这几乎是直接从示例页面复制的，除了不使用模拟数据，我传递的是从父组件获取并作为道具传递的数据。这是问题所在：尽管父组件中的数据确实会更新（最初，仅获取5列的皮表，然后获取包含20列的较大表，以替换父组件状态中的第一个表），用户界面未在我的Web应用程序上更新。 （我认为是因为表组件的内部状态没有更新？）

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

非常感谢您提供任何帮助。我正在使用它来动态解决钩子和无头组件，并希望遵循使用该库的最佳实践，因为从docs +示例来看，它似乎是React的一个非常好的强大的表组件。谢谢！！

Edit 1：要快速更新和澄清，对于父组件触发两次单独的异步axios提取来更新相同的父状态变量可能是一个不好的模式。我不确定。正如我提到的，并且为了澄清起见，第一次获取快速获取了一个瘦的数据版本，而第二次获取获取了整个表。因为父状态会使用新的数据数组更新，所以作为tableData属性传递给<MyReactTable7Table />的数组也会发生更改。

Edit 2：变得更清晰/改善了写作/上下文。很难连接实时，因为错误/问题本身与实时数据无法正确更新有关...

Answer 1

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

根据您的情况，不需要第二个useMemo。

因此删除下面的代码，只需使用tableData

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

喜欢此：

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