Question

因此，我正在开发一个小型的个人项目，基本上是一个待办事项应用程序，但后端具有express和mongo。我使用useEffect()向/all-todos端点发出axios get请求，该请求返回了所有待办事项。然后在useEffect()的依赖项数组中，将todos数组指定为依赖项，这意味着我希望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()在待办事项更改时被触发？

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>
    );
}

如何使React的useEffect停止无限循环中的重新渲染？

1 个答案: