Как я могу использовать useEffect реакции, чтобы остановить рендеринг в бесконечном l oop? - PullRequest
Новая
       8

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

0 голосов
/ 17 марта 2020

Итак, я работаю над небольшим личным проектом, который в основном представляет собой приложение todo, но с бэкэндом с express и mon go. Я использую useEffect(), чтобы сделать топор ios получить запрос к конечной точке /all-todos, который возвращает все мои задачи. Затем внутри массива зависимостей 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() срабатывал должным образом при изменении задач?

1 Ответ

1 голос
/ 17 марта 2020

Вы должны выполнить ловушку, только если 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>
    );
}
...