错误太多重新渲染。 react 限制渲染次数以防止无限循环答案

【问题标题】：error too many re-renders. react limits the number of renders to prevent an infinite loop错误太多重新渲染。 react 限制渲染次数以防止无限循环
【发布时间】：2021-02-04 10:44:50
【问题描述】：

似乎调用映射到 state 的 todoList 会导致问题，但我不知道为什么......如何让我的 state 中的 todos 数组显示在表格中而不会出现此错误？

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getTodos } from '../../actions/todo';

//Bootstrap Table
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import * as ReactBootStrap from 'react-bootstrap';

const UserTable = ({ getTodos, todoList }) => {
  useEffect(() => {
    getTodos();
    // eslint-disable-next-line
  }, []);

  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);

  const columns = [
    { dataField: 'id', text: 'ID' },
    { dataField: 'userId', text: "User's ID" },
    { dataField: 'title', text: 'Title of Todo' },
    { dataField: 'completed', text: 'Is this done?' },
  ];

  setTodos(todoList);

  return (
    <BootstrapTable
      keyField='id'
      data={todos}
      columns={columns}
      pagination={paginationFactory()}
    />
  );
};

const mapStateToProps = (state) => ({
  todoList: state.todo.todoList,
});

export default connect(mapStateToProps, { getTodos })(UserTable);

【问题讨论】：

这是导致它setTodos(todoList);。在初始化时使用它const [todos, setTodos] = useState(todoList);

标签： javascript reactjs redux state

【解决方案1】：

考虑避免直接在函数体内设置状态 - 这将导致无限循环。

无论如何 - 为什么要将其保持在状态？我建议你对道具进行操作。

return (
  <BootstrapTable
    keyField='id'
    data={todoList} // todos directly from props
    columns={columns}
    pagination={paginationFactory()}
  />
);

【讨论】：

这对我有用，我删除了 const [todo, setTodos] = useState([]) 现在可以看到数据了。