Реагируйте Таблица 7 - Повторная визуализация компонента таблицы, когда родительский элемент передает новые или обновленные данные - PullRequest
Новая
       27

Реагируйте Таблица 7 - Повторная визуализация компонента таблицы, когда родительский элемент передает новые или обновленные данные

0 голосов
/ 17 апреля 2020

Я перехожу из React Table 6 в 7, в которой появилось много новых изменений, поскольку React Table 7 теперь является библиотекой безголовых утилит, созданной с множеством хуков. Это сильно отличается от Таблицы 6 реакции. Я не слишком знаком с крючками, и я не использовал их ранее (я прочитал о них несколько месяцев назад, все), но теперь я как бы вынужден садиться в сорняки из них, поскольку мое приложение в значительной степени опирается на эту библиотеку.

Используя руководство по примерам здесь , я устанавливаю начальную таблицу в своем приложении реагирования, пытаясь соединить таблицу с действующим данные для моего приложения, которые извлекаются с 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 столбцами, которая заменяет первую таблицу в состоянии родительских компонентов), Пользовательский интерфейс не обновляется в моем веб-приложении. (Я думаю, потому что внутреннее состояние компонента таблицы не обновляется?)

В моем примере conferenceId - это 1 из начальных 5 выбранных столбцов, однако teamMarket - это один из 20, но не один из 5 начальных столбцов. Хотя родительский компонент извлекает новые данные и повторно отображает их, компонент таблицы не обновляется для отображения новых данных в новом столбце.

Любая помощь по этому вопросу очень приветствуется. С этим я на лету разбираюсь с зацепками и безголовыми компонентами и хотел бы следовать рекомендациям по использованию этой библиотеки, потому что из примеров docs + он кажется очень хорошим и мощным компонентом таблиц для React. Спасибо!!

Редактировать 1 : чтобы быстро обновить и уточнить, может быть, это плохой шаблон для родительского компонента, чтобы запустить 2 отдельных асин c ax ios выборки для обновления того же родителя переменная состояния. Я не уверен. Как я уже упоминал, и только для пояснения, 1-ая выборка быстро получает тощую версию данных, в то время как 2-ая выборка захватывает полную таблицу. Поскольку родительское состояние обновляется новым массивом данных, массив, передаваемый как tableData prop в <MyReactTable7Table />, также изменяется.

Edit 2 : улучшена четкость / улучшена запись / контекст. Трудно подключить в реальном времени, потому что сама ошибка / проблема связана с неправильным обновлением живых данных ...

1 Ответ

1 голос
/ 17 апреля 2020

Вы предоставили пустую зависимость массива для вашего useMemo, что означает, что запомненное значение tableData создается и присваивается data и никогда не изменяется. Вам нужно будет указать зависимость, указывающую, когда useMemo должен пересчитать / восстановить значение.

В вашем случае нет необходимости во втором useMemo.

Так что удалите ниже кода и просто используйте tableData

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

Как это: 

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