javascript - 如何根据变量值使 useEffect react 钩子(Hook)重新渲染？

Question

所以我得到了这个组件:

export default function () {
    const [todos, setTodos] = useState([]);


    useEffect(() => {
        function populateTodos () {
            axios.get(`http://localhost:8000/api/all-todos`)
                .then(res => setTodos(res.data))
                .catch(err => console.log(err));
        }

        populateTodos();
    }, []);

    console.log(todos);

    return (
        <div>
            ...
        </div>
    );
}

我正在使用 useEffect Hook 从数据库中获取所有待办事项，并且工作正常。问题是我不知道如何使用 useEffect 在对 todos 数组进行修改(例如添加、删除或更新)时触发重新渲染。如果我为 useEffect 的依赖数组提供 todos 变量，我会在控制台中得到无限循环日志记录。 如何在 todos 数组更新时使用 useEffect 触发重新渲染？

Answer 1

问题是 useEffect 内部没有逻辑，请参见下面的代码

    const [todos, setTodos] = useState([]);

    useEffect(() => {
        setTodos([1])
    }, [todos])

这也会产生无限循环。但我们始终赋予相同的值(value)。问题是，当它更新时，依赖关系为 true，因此它再次开始执行 useEffect()。您必须想出一些具体的逻辑，例如更改长度，或者您可以采用如下所示的新状态

    const [todos, setTodos] = useState([]);
    const [load, setLoad] = useState(false);

    useEffect(() => {
        function populateTodos () {
            axios.get(`http://localhost:8000/api/all-todos`)
                .then(res => setTodos(res.data))
                .catch(err => console.log(err));
        }

        populateTodos();
    }, [load])

    console.log(todos)
    return (
        <div>
            <button
            onClick={() => {
                todos.push(1)
                setLoad(!load)
            }}
            >cilck</button>
        </div>
    );