单击这些按钮后，onClick事件提供给它们的函数将执行无限循环，页面将冻结
有什么办法可以预防吗？
<section>
<button
onClick={() => {
this.setState({ category: "image" });
}}
>
Image
</button>
<Button>Figure</Button>
<Button>Image</Button>
</section>
<section className="hello">
{this.state.store &&
this.state.store.map((st) => {
if (st[0].exist && st[0].category == this.state.category) {
return (
<div className="eachC">
<Card
category={st[0].category}
image={st[0].image}
price={st[0].price}
name={st[0].name}
/>
<section>
<Button onClick={this.setState({ save: 1 }, () => {})}>
Delete
</Button>
<Button onClick={this.setState({ save: 1 }, () => {})}>
Update
</Button>
</section>
</div>
);
}
})}
</section>
1条答案
按热度按时间arknldoa1#
如果不知道在呈现之前还有什么其他逻辑，也不知道是哪些按钮导致了这个问题，就很难确切地说出为什么会导致无限循环，因为当前有多个按钮执行不同的操作。
但是我现在可以看到，您没有为Update和Delete按钮向
onClick事件传递函数，而是进行了一个函数调用，该函数将在呈现组件时调用，而不是在单击时调用，因此它肯定无法正常工作。你需要像对待Image按钮那样把它们 Package 在一个函数中，而且你也不需要你添加的空回调函数，所以我将把它修改成如下的形式：
然而，我不确定这是否是导致你的无限循环的原因，因为你没有在你的问题中包含任何更多的逻辑！