Как я могу сделать useEffect реакции, чтобы остановить рендеринг в бесконечном l oop даже с указанной зависимостью?

Question

Я работаю над небольшим полнофункциональным приложением CRUD, использующим реагирование и mongodb, и у меня возникла эта проблема, когда я использую useEffect, чтобы сделать топор ios получить запрос на сервер, чтобы получить все мои задачи. Проблема в том, что useEffect делает свою работу, но она также возвращается к бесконечности. Это мой компонент:

export default function () {
    ...
    const [todos, setTodos] = useState([]);
    const currentUser = JSON.parse(localStorage.getItem('user'))._id;

    useEffect(() => {
        async function populateTodos () {
            try {
                const res = await axios.get(`http://localhost:8000/api/all-todos/${currentUser}`);
                setTodos(res.data);
            } catch (err) {
               if (err.response) {
                    console.log(err.response.data);
                    console.log(err.response.status);
                    console.log(err.response.headers);
               } else if (err.request) {
                   console.log(err.request);
               } else {
                   console.log('Error: ', err.message);
               }
            }
        }

        populateTodos();
    }, [todos]);

    console.log(todos);

    return (
        ...
    );
}

Так что я ожидал, что console.log будет напечатан только при изменении задач, например, когда я добавляю новый задачу и т. Д., Но вместо этого печатается навсегда.

Answer 1

Вы сказали, что вам нужно сначала получить todos, а всякий раз, когда todos изменяется. Я могу предложить вам другой подход, используя еще одну переменную, что-то вроде этого:

const TodosComponent = (props) => {
    const [todos, setTodos] = useState([]);
    const [updatedTodos, setUpdatesTodos] = useState(true);

    const fetchFunction = () => {
        // In here you implement your fetch, in which you call setTodos().
    }

    // Called on mount to fetch your todos.
    useEffect(() => {
        fetchFunction();
    }, []);

    // Used to updated todos when they have been updated.
    useEffect(() => {
        if (updatedTodos) {
            fetchFunction();
            setUpdatesTodos(false);
        }
    }, [updatedTodos]);

    // Finally, wherever you update your todos, you also write `updateTodos(true)`. 
}