[英]error too many re-renders. react limits the number of renders to prevent an infinite loop
It seems that calling the todoList which is mapped to state is causing the issue, but I don't know why...how do I get the array of todos in my state to display in the table without this error?似乎调用映射到状态的 todoList 导致了问题,但我不知道为什么......我如何让我的状态中的待办事项数组显示在表中而不出现此错误?
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);
Consider avoiding setting the state directly inside function body - it will cause an endless loop.考虑避免直接在函数体内设置状态 - 这会导致无限循环。
Anyways - why do you want to keep it inside state?无论如何 - 你为什么要把它保持在 state 内? I would suggest you to operate on the props.
我建议你对道具进行手术。
return (
<BootstrapTable
keyField='id'
data={todoList} // todos directly from props
columns={columns}
pagination={paginationFactory()}
/>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.