函数钩子useEffect中的无限循环问题 [英] problem with infinite loop in function hook useEffect

问题描述

我的钩子上有一个无限循环的问题，我正在传递本地 JSON 早餐的数据.如果您正在使用 map 数据进行迭代，而我正在使用它来绘制按钮菜单.如果我删除函数末尾的数据，并保留空数组，则会向我发送以下错误:

I have a problem with an infinite loop on my hook, I'm passing the data of the local JSON breakfast. If you are iterating with map the data and I am taking it to paint a menu of buttons. If I remove the data at the end of the function, and leave the empty array, it sends me the following error:

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 缺少依赖项:'breakfast'.要么包括它要么删除依赖数组 react-hooks/exhaustive-deps

React Hook useEffect has a missing dependency: 'breakfast'. Either include it or remove the dependency array react-hooks/exhaustive-deps

推荐答案

问题很简单，你有 breakfast 数组作为 useEffect 和 的依赖useEffect 您正在设置早餐数组本身.现在，由于在组件内部声明了 const 早餐数组，因此每次都会生成对它的新引用，并且由于 useEffect 将数组设置为状态，它会重新渲染并在下一次重新渲染 breakfast 的比较数组失败，因为引用已更改.

The problem is simple, you have breakfast array as a dependency to useEffect and in useEffect you are setting the breakfast array itself. Now since the const breakfast array is declared inside the component, a new reference to it is generated everytime and since useEffect sets the array in state, it re-renders and on next re-render the comparison for breakfast array fails since the reference has changed.

解决方法很简单，你不需要在组件中有const数组，也不需要使用useEffect

The solution is simple, you don't need to have the const array in the component and also you don't need to use 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;

这篇关于函数钩子useEffect中的无限循环问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！