[英]problem with infinite loop in function hook useEffect
我的钩子上存在无限循环问题,我正在传递本地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缺少依赖项:“ breakfast”。 包括它或删除依赖项数组react-hooks / exhaustive-deps
useEffect
的第二个参数是要监视的状态/挂钩的数组,当状态/挂钩更改时,将运行效果。 由于您的breakfast
是const,所以我猜您只想将原始stateProduct
breakfast
。 因此,不要使用[]
作为默认值,而应使用breakfast
。
const [stateProduct, setStateProduct] = useState(breakfast);
另外,在您的react功能组件之外声明const breakfast ...
可能是一个好主意,这样它就不会在每次重新渲染时都重新声明它。
问题很简单,您将breakfast
数组作为对useEffect
的依赖useEffect
,在useEffect
您要设置Breakfast数组本身。 现在,由于在组件内部声明了const breakfast数组,因此每次都会生成对其的新引用,并且由于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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.