错误:太多的重新渲染.React限制渲染次数以防止无限循环[另一种变体]

Question

我读了一些关于这个主题的文章，但是没有帮助。我想我的问题有点不同

下面是我的代码:

import React, { useEffect } from 'react';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import store from '../../store';
import ToDoAdder from '../ToDoAdder/ToDoAdder';
function ToDoList() {
const [users, setUsers] = useState([]);
const [todosState, setTodosState] = useState([]);
useEffect(() => {
fetchUsers();
fetchData();
}, []);
const fetchUsers = async () => {
const data = await fetch(`https://jsonplaceholder.typicode.com/users/`);
const res = await data.json();
console.log(res, 0);
setUsers(res);
};
const fetchData = async () => {
const data = await fetch('https://jsonplaceholder.typicode.com/todos/');
const res = await data.json();
const needed = res.slice(0, 10);
setTodosState(needed);
return res;
};
console.log(todosState);
const todosWithUser = todosState.map((o) => {
const user = users.filter((i) => o.userId === i.id)[0];
o.user = user;
return o;
});
store.dispatch({ type: 'add/todoArray', payload: { todos: todosWithUser } });
const todos = useSelector((store) => store.toDos);
// console.log(todos);
return (
/* some statement */
);
}
export default ToDoList;

告诉我如何解决这个问题?我知道我的问题是在setTodosState，但我解决不了

Answer 1

永远不要在组件内部调用任何更改状态。它需要在函数或钩子效果上调用它:

useEffect(() => {
const todosWithUser = todosState.map((o) => {
const user = users.filter((i) => o.userId === i.id)[0];
o.user = user;
return o;
});
store.dispatch({ type: "add/todoArray", payload: { todos: todosWithUser } });
}, [todosState]);

Answer 2

这是你的代码的问题:

store.dispatch({ type: 'add/todoArray', payload: { todos: todosWithUser } });

每次呈现ToDoList时，将调用此分派，导致redux状态更改，并且您还可以在代码中使用此选择器:

const todos = useSelector((store) => store.toDos);

它将再次渲染ToDoList使渲染循环变为无限

---

让我们把你的调度放到eventandler或者useEffect钩子中