Javascript react-使用react表格超出最大更新深度_Javascript_Reactjs_React Native

Javascript react-使用react表格超出最大更新深度

javascript reactjs react-native

Javascript react-使用react表格超出最大更新深度,javascript,reactjs,react-native,Javascript,Reactjs,React Native,尝试在一个基本应用程序中包含react表，该应用程序在字段中获取输入，在字段内容更改时将其存储在components状态，然后按下按钮从Github获取数据在我添加行之前，一切正常 consttableinstance=useTable（{columns，data}）页面将正常加载，但一旦输入字段发生更改（即您键入），应用程序就会崩溃并出现错误：错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发

尝试在一个基本应用程序中包含react表，该应用程序在字段中获取输入，在字段内容更改时将其存储在components状态，然后按下按钮从Github获取数据

在我添加行之前，一切正常

consttableinstance=useTable（{columns，data}）

页面将正常加载，但一旦输入字段发生更改（即您键入），应用程序就会崩溃并出现错误：

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

堆栈跟踪包括来自react表库的这些代码段

hooks/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;

import React，{useState}来自“React”；
导入“/App.css”；
从“反应表”导入{useTable}
函数App（）{
const[data，setData]=useState（[]）；
const[keyword，setKeyword]=useState（“”）；
常量fetchData=（）=>{
常量url=`https://api.github.com/search/repositories?q=${关键字}`
获取（url）
.then（response=>response.json（））
.然后（响应数据=>{
设置数据（响应数据项）；
});
}
常数handleChange=（e）=>{
setKeyword（如target.value）；
}
常量列=[{
标题：'名称'，//列标题
访问器：“全名”//值访问器
}, {
标题：“URL”，
访问者：“html\u url”
}, {
标题：“所有者”，
访问者：“所有者。登录名”
}]
const tableInstance=useTable（{columns，data}）//导致问题的行
返回(
取来
);
}
导出默认应用程序；

据推测，我做了一些事情，使状态在每次呈现页面时更新，从而导致另一次呈现，但我无法确定它是什么。提前感谢您的帮助。

好的，所以我通过制作一个表组件修复了这个问题，该组件随后包含在应用程序组件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;

import React，{useState}来自“React”；
导入“/App.css”；
从“反应表”导入{useTable}
函数表（{columns，data}）{
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
准备工作，
}=useTable（{columns，data}）
返回(
{
headerGroups.map（headerGroups=>(
{
headerGroup.headers.map（列=>(
{
column.render（'Header'）
}
))
}
))
}
{//在行上循环
rows.map（row=>{
准备工作（世界其他地区）
返回(
{//在行和单元格上循环
row.cells.map（cell=>(
{cell.render（'cell'）}
))
}
)
})
}
);
}
函数App（）{
const[data，setData]=useState（[]）；
const[keyword，setKeyword]=useState（“”）；
常量fetchData=（）=>{
常量url=`https://api.github.com/search/repositories?q=${关键字}`
获取（url）
.then（response=>response.json（））
.然后（响应数据=>{
设置数据（响应数据项）；
});
}
常数handleChange=（e）=>{
setKeyword（如target.value）；
}
常量列=[{
标题：'名称'，//列标题
访问器：“全名”//值访问器
}, {
标题：“URL”，
访问者：“html\u url”
}, {
标题：“所有者”，
访问者：“所有者。登录名”
}]
返回(
取来
);
}
导出默认应用程序；

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

好的，所以我制作了一个表组件，然后将其包含在应用程序组件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;

import React，{useState}来自“React”；
导入“/App.css”；
从“反应表”导入{useTable}
函数表（{columns，data}）{
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
准备工作，
}=useTable（{columns，data}）
返回(
{
headerGroups.map（headerGroups=>(
{
headerGroup.headers.map（列=>(
{
column.render（'Header'）
}
))
}
))
}
{//在行上循环
rows.map（row=>{
准备工作（世界其他地区）
返回(
{//在行和单元格上循环
row.cells.map（cell=>(
{cell.render（'cell'）}
))
}
)
})
}
);
}
函数App（）{
const[data，setData]=useState（[]）；
const[keyword，setKeyword]=useState（“”）；
常量fetchData=（）=>{
常量url=`https://api.github.com/search/repositories?q=${关键字}`
获取（url）
.then（response=>response.json（））
.然后（响应数据=>{
设置数据（响应数据项）；
});
}
常数handleChange=（e）=>{
setKeyword（如target.value）；
}
常量列=[{
标题：'名称'，//列标题
访问器：“全名”//值访问器
}, {
标题：“URL”，
访问者：“html\u url”
}, {
标题：“所有者”，
访问者：“所有者。登录名”
}]
返回(
取来
);
}
E