反应 - 使用反应表超出最大更新深度

Question

尝试将react-table包含在一个基本应用程序中，该应用程序接受字段中的输入，当字段内容更改时将其存储在组件状态中，然后按下按钮时从Github中获取数据。

一切正常，直到我添加该行

const tableInstance = useTable({columns, data})

页面将正常加载，但当输入字段发生变化（即您输入内容）时，应用程序崩溃并出现错误：

错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。

堆栈跟踪包含来自react-table库的这些片段

钩子/useColumnVisibility.js

  204 | 
  205 | useMountedLayoutEffect(() => {
  206 |   if (getAutoResetHiddenColumns()) {
> 207 |     dispatch({ type: actions.resetHiddenColumns })
  208 | ^ }
  209 | }, [dispatch, columns])
  210 | 

和 publicUtils.js：

  153 | 
  154 | safeUseLayoutEffect(() => {
  155 |   if (mountedRef.current) {
> 156 |     fn()
  157 | ^ }
  158 |   mountedRef.current = true
  159 |   // eslint-disable-next-line

这是我的 App.js 文件中的代码

import React, { useState } from 'react';
import './App.css';
import {useTable} from "react-table"

function App() {

  const [data, setData] = useState([]);
  const [keyword, setKeyword] = useState('');

  const fetchData = () => {
    const url = `https://api.github.com/search/repositories?q=${keyword}`
    fetch(url)
      .then(response => response.json())
      .then(responseData => {
        setData(responseData.items);
      });
  }

  const handleChange = (e) => {
    setKeyword(e.target.value);
  }

  const columns = [{
    Header: 'Name', //column header 
    accessor: 'full_name' //Value accessor
  }, {
    Header: 'URL',
    accessor: 'html_url'
  }, {
    Header: 'Owner',
    accessor: 'owner.login'
  }]

  const tableInstance = useTable({columns, data}) // line causing the problem

  return (
    <div className="App">
      <input type="text" onChange={handleChange}/>
      <button onClick={fetchData} value={keyword} >Fetch</button>
    </div>
  );
}

export default App;

据推测，我做了一些事情，导致每次渲染页面时状态都会更新，从而导致另一次渲染，但我无法弄清楚它是什么。预先感谢您的任何帮助。

Answer 1

好的，所以我通过创建一个 Table 组件来解决这个问题，然后将该组件包含在 App 组件 DOM 中。

这是修复该问题的更新代码

import React, { useState } from 'react';
import './App.css';
import {useTable} from "react-table"

function Table({columns, data}){

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

  return (
    <table {...getTableProps()}>
      <thead>
        {
          headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {
                  headerGroup.headers.map( column => (
                    <th {...column.getHeaderProps()}>
                      {
                        column.render('Header')
                      }
                    </th>
                  ))
                }
              </tr>
          ))
        }
      </thead>
      <tbody {...getTableBodyProps()}>
        { // loop over the rows
          rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                { // loop over the rows cells 
                  row.cells.map(cell => (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  ))
                }
              </tr> 
            )
          })
        }
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>
  );
}

function App() {

  const [data, setData] = useState([]);
  const [keyword, setKeyword] = useState('');

  const fetchData = () => {
    const url = `https://api.github.com/search/repositories?q=${keyword}`
    fetch(url)
      .then(response => response.json())
      .then(responseData => {
        setData(responseData.items);
      });
  }

  const handleChange = (e) => {
    setKeyword(e.target.value);
  }

  const columns = [{
    Header: 'Name', //column header 
    accessor: 'full_name' //Value accessor
  }, {
    Header: 'URL',
    accessor: 'html_url'
  }, {
    Header: 'Owner',
    accessor: 'owner.login'
  }]


  return (
    <div className="App">
      <input type="text" onChange={handleChange}/>
      <button onClick={fetchData} value={keyword} >Fetch</button>
      <Table 
        columns={columns} 
        data = {data}
      />
    </div>
  );
}

export default App;

问题是我真的不知道为什么会这样，也不知道问题的症结到底是什么。