Использовать таблицу реакции в компоненте высокого порядка, недопустимый вызов ловушки - PullRequest
Новая
       30

Использовать таблицу реакции в компоненте высокого порядка, недопустимый вызов ловушки

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

В настоящее время я пишу пользовательский компонент таблицы для приложения. Мне не хочется писать этот компонент как компонент без состояния, поскольку я точно знаю, что он должен иметь очень устойчивое состояние.

Очевидно, я не могу использовать хуки реактивной таблицы, так как это компонент высокого порядка. Есть идеи как этого добиться? 

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

class Grid extends Component {
    render() {
        const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
            columns,
            data,
        });

        return (
           <div></div>
        )
    }
}

export default Grid

Сообщение об ошибке здесь:

  • Недопустимый вызов перехвата. Хуки можно вызывать только внутри тела компонента функции.

Я не включил код в рендер, так как это не главная проблема, проблема в том, что я нужно перевести хуки в обычный HO C сценарий. Я не смог найти обходного пути для этого, любая помощь будет оценена.

1 Ответ

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

Я думаю, что вы путаете stateless и functional. Крючки могут использоваться только в функциональных компонентах, но они могут иметь состояние. Функциональные компоненты могут использовать хуки useState и useReducer для реализации состояния.

В вашем случае вы можете сделать что-то вроде: 

function Grid() {
    const [gridState, setGridState] = useState()
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
        columns,
        data,
    });

    return (
       <div></div>
    )
}
...