Бесконечное L oop при использовании хука реакции

Question

Я учусь реагировать в течение последних нескольких дней, и при использовании хука useEffect я получаю бесконечное oop по настройке моей переменной состояния.

Кто-нибудь может сказать мне, что происходит и как это преодолеть введите описание изображения здесь

Вот мой код

import React, { useState, useEffect } from "react";
import axios from "axios";

const TodoEntry = () => {

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

  useEffect(() => {
    axios.get('http://localhost:5000/api/todos')
     .then(res => { setTodos(res.data); console.log(todos) })
     .catch(err => console.log(err))
  },[todos]);

  return (
    <div>
      <h1>Todo App</h1>
   </div>
  );
};

export default TodoEntry;

Answer 1

Пара проблем в вашем коде:

• Поскольку функция getTodos является зависимостью от useEffect hook, каждый раз при обновлении состояния создается новая функция getTodos, которая затем запускает хук useEffect.

• Вам не нужно связывать функцию then при использовании синтаксиса async-await. Вы можете просто дождаться результата axios.get(...).

Чтобы решить первую проблему бесконечного l oop, используйте один из следующих вариантов:

• Оберните функцию getTodos в ловушку useCallback. Подробнее см. useCallback .

  Поскольку, getTodos вызовы функций displayTodos, вам нужно будет обернуть его в ловушку useCallback и добавить displayTodos в массив зависимостей useCallback хук, который оборачивает getTodos функцию. На мой взгляд, лучше просто убрать функцию displayTodos и обновить состояние внутри getTodos function

  const getTodos = useCallback(async () => {
     try {
        const res = await axios.get('http://localhost:5000/api/todos')
        setTodos(res.data);
     } catch(err) {
        console.log(err);
     }
  }, [setTodos]);
  

  Demo

  

• Put the code inside getTodos inside useEffect hook and remove the getTodos function.

  useEffect(() => {
    axios.get("http://localhost:5000/api/todos")
     .then(res => setTodos(res.data))
     .catch(err => console.log(err));
  
  }, [setTodos]);
  

  Demo

  Править Blissful-Darkness-1q7ng

Answer 2

Это потому, что список зависимостей для вашего вызова useEffect является функцией. Вероятно, вы хотели добавить сами данные задачи.

  useEffect(() => {
    getTodos();
  },[todos]);