如何防止onClick事件触发后陷入无限循环？

核心问题 #

你的Delete和Update按钮的onClick直接执行了this.setState()，这会导致组件每次渲染时都触发状态更新，进而引发重新渲染，形成无限循环，最终页面冻结。

修复方案 #

把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" key={st[0].name}>
            <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>

补充说明 #

• React的onClick需要接收一个函数引用，如果直接写this.setState(...)，相当于渲染时就立即执行这个方法，触发状态更新。
• 用箭头函数包裹后，只有当用户点击按钮时，才会调用setState，避免了不必要的重复渲染。
• 额外给map循环的外层元素加上了key属性，这是React列表渲染的规范要求，能避免渲染警告，这里用st[0].name作为示例，实际项目中建议用唯一ID类的字段。

内容的提问来源于stack exchange，提问作者SilentH11