如何使 react 的使用效果在无限循环中停止重新渲染？

Question

所以我正在做一个小型的个人项目，它基本上是一个todo应用程序，但有一个带有express和mongo的后端。我使用useEffect()向返回所有todo的/all-todos端点发出axios get请求。然后，在useEffect()的dependency数组中，我将todos数组指定为dependency，这意味着我希望useEffect()在任务数组以任何方式被修改时都能引起重新发布。看看这个：

export default function () {
const [todos, setTodos] = useState([]);
const currentUser = JSON.parse(localStorage.getItem('user'))._id;
useEffect(() => {
function populateTodos () {
axios.get(`http://localhost:8000/api/all-todos/${currentUser}`)
.then(res => setTodos(res.data))
.catch(err => console.log(err));
}
populateTodos();
}, [todos]);
console.log(todos);
return (
<div className="App">
...
</div>
);
}

所以我把console.log()放在那里，以证明组件会被重新渲染，问题是console.log()会永远打印到控制台，直到浏览器变得越来越慢。如何使useEffect()在todos更改时明显触发？

Answer 1

只有当currentUser发生变化时，才应该执行挂钩：

export default function () {
const [todos, setTodos] = useState([]);
const [error, setError] = useState(null);
const currentUser = JSON.parse(localStorage.getItem('user'))._id;
useEffect(() => {
function populateTodos () {
axios.get(`http://localhost:8000/api/all-todos/${currentUser}`)
.then(res => setTodos(res.data))
.catch(err => setError(err));
}
populateTodos();
}, [currentUser]);
console.log(todos);
if (error) return (
<div className="App">
There was an error fetching resources: {JSON.stringify(error)}
</div>
)
return (
<div className="App">
...
</div>
);
}