проблема с бесконечным циклом в хуке функции useEffect

Question

У меня проблема с бесконечным циклом на крючке, я передаю данные местного завтрака JSON.Если вы перебираете карту с данными, а я беру это нарисовать меню кнопок.Если я удаляю данные в конце функции и оставляю пустой массив, он отправляет мне следующую ошибку:

const BreakfastComponent = () => {

   const breakfast = [
    {
      id: 0,
      name: "Sandwich de jamón y queso",
      price: '35',
      img: "https://i.ibb.co/ynC9xHZ/sandjc.png",

    },
    {
      id: 1,
      name: "Jugo Natural",
      price: '15',
      img: "https://i.ibb.co/8mrd4MK/orangejuice.png",
    },
    {
      id: 2,
      name: "Café americano",
      price: '20',
      img: "https://i.ibb.co/nsj1GL0/americancoffe.png",
    },
    {
      id: 3,
      name: "Café con leche",
      price: '28',
      img: "https://i.ibb.co/GRPBm7j/coffeandmilk.png",
    }
  ];


  const [stateProduct, setStateProduct] = useState([ ]);


  useEffect(() => {

    setStateProduct(breakfast);
  }, [breakfast]);

  return (

      <section className="databreakfast">
        {stateProduct.map((element, item) =>
          <ButtonsBComponent
            key={item}
            {...element}

          />
        )}
        </section>



  )
};

export default BreakfastComponent;

React Hook useEffect отсутствует зависимость: 'завтрак'.Либо включите его, либо удалите массив зависимых реактив-хуков / исчерпывающий-deps

Answer 1

Проблема проста: у вас есть массив breakfast в качестве зависимости от useEffect, а в useEffect вы сами устанавливаете массив завтраков. Теперь, так как массив const завтрак объявлен внутри компонента, новая ссылка на него генерируется каждый раз, и так как useEffect устанавливает массив в состояние, он перерисовывает и при следующей перерисовке сравнение для массива breakfast завершается неудачно, так как ссылка изменился

Решение простое, вам не нужно иметь массив const в компоненте, а также вам не нужно использовать useEffect

const breakfast = [
    {
      id: 0,
      name: "Sandwich de jamón y queso",
      price: '35',
      img: "https://i.ibb.co/ynC9xHZ/sandjc.png",

    },
    {
      id: 1,
      name: "Jugo Natural",
      price: '15',
      img: "https://i.ibb.co/8mrd4MK/orangejuice.png",
    },
    {
      id: 2,
      name: "Café americano",
      price: '20',
      img: "https://i.ibb.co/nsj1GL0/americancoffe.png",
    },
    {
      id: 3,
      name: "Café con leche",
      price: '28',
      img: "https://i.ibb.co/GRPBm7j/coffeandmilk.png",
    }
  ];

const BreakfastComponent = () => {

  const [stateProduct, setStateProduct] = useState(breakfast);


  return (

      <section className="databreakfast">
        {stateProduct.map((element, item) =>
          <ButtonsBComponent
            key={item}
            {...element}

          />
        )}
        </section>



  )
};

export default BreakfastComponent;

Answer 2

Второй аргумент

useEffect - это массив состояний / хуков, которые нужно отслеживать и, когда они меняются, запускать эффект.Поскольку ваш breakfast является константой, я предполагаю, что вы просто хотите, чтобы исходный stateProduct был breakfast.Поэтому вместо использования [] в качестве значения по умолчанию используйте breakfast.

const [stateProduct, setStateProduct] = useState(breakfast);

Также, возможно, хорошей идеей будет объявить const breakfast ... вне функционального компонента реагирования, чтобы он не объявлялся повторно.это при каждом повторном рендеринге.