时间戳

首页 > 解决方案 > 函数钩子useEffect中的无限循环问题

javascript - 函数钩子useEffect中的无限循环问题

问题描述

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

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

标签： javascriptreactjsreact-hooks

解决方案

useEffect的第二个参数是要观察的状态/钩子数组，当它们发生变化时，运行效果。由于您breakfast是 const，我猜您只希望原件stateProduct是breakfast. 因此，不要将[]其用作默认值，而是使用breakfast.

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

此外，在您的反应功能组件之外声明可能是一个好主意，const breakfast ...这样它就不会在每次重新渲染时重新声明它。

推荐阅读