为什么反应表会收到错误消息“ react is undefined”

Question

我正在尝试将react-table集成到我的应用程序中，并且在import { useTable } from 'react-table'行上遇到错误。

TypeError: React is undefined

错误发生在react-table.development.js中的var safeUseLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;行上。

为什么反应本身是不确定的？

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import { useTable } from 'react-table'


export default class Taxonomies extends React.Component {

    taxonomyRows = () => {
        return data = React.useMemo(
            () => [
            {
                full_code: '1',
                level1: 'a',
                level2: 'b',
                level3: 'c',
                level4: 'd'
            },
            {
                full_code: '2',
                level1: 'e',
                level2: 'f',
                level3: 'g',
                level4: 'h'
            },
            {
                full_code: '3',
                level1: 'i',
                level2: 'j',
                level3: 'k',
                level4: 'l'
            },
            ],
            []
        )
    }

    taxonomyColumns = () => {
        return columns = React.useMemo(
          () => [
            {
              Header: 'Full Code',
              accessor: 'full_code',
            },
            {
              Header: 'Level 1',
              accessor: 'level1',
            },
            {
              Header: 'Level 2',
              accessor: 'level2',
            },
            {
              Header: 'Level 3',
              accessor: 'level3',
            },
            {
              Header: 'Level 4',
              accessor: 'level4',
            },
          ],
          []
        )
    }


    render = () => {
        const columns = this.taxonomyColumns()
        const data = this.taxonomyRows()
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({ columns, data })

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

Answer 1

该问题与React无关，但是您正在使用基于类的组件中的钩子。其中useTable，React. useMemo是挂钩。

相反，将基于类的组件转换为功能组件。

const Taxonomies = () => {

    ....
    ....

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

export default Taxonomies;