React中onClick事件为何在每次渲染时自动触发？

嘿，我来帮你看看这个问题～

你的代码里有几个小细节出错了，才导致了这个意外的行为：

1. 条件判断未正确引用state变量 #

你在JSX的条件渲染里写的是 saveflag?<></>:，但这里的 saveflag 没有加上 this.state. 前缀，相当于引用了一个未定义的变量（值为undefined），所以这个条件永远为false，按钮会一直显示。哪怕你点击按钮把this.state.saveflag设为true，render时还是用的未定义的saveflag，看起来就像saveflag又变回了false。

2. onClick事件处理的写法有问题 #

你用逗号运算符串联两个操作的写法虽然语法上能运行，但可读性极差，而且如果handleApiGrants是异步函数，还可能出现时序问题。正确的做法是用花括号把多个操作包裹起来，用分号分隔。

修复后的完整代码 #

constructor() { 
  super(); 
  this.state = { 
    options: [], 
    suboptions: [], 
    saveflag: false 
  }; 
} 

render() {
  return (
    <div> 
      {console.log(this.state.saveflag), this.state.saveflag ? <></> : 
        <button 
          type="button" 
          className="btn" 
          onClick={() => {
            this.props.data.handleApiGrants(apis);
            this.setState({ saveflag: true });
          }} 
        > 
          Save 
        </button>
      } 
    </div>
  );
}

额外小建议 #

• 别在JSX表达式里直接写console.log，每次组件渲染都会执行它，容易造成日志混乱。如果要调试状态，可以在componentDidUpdate钩子函数里打印。
• 如果handleApiGrants是异步函数，建议在它的回调里再执行setState，确保API请求完成后再更新状态：

  onClick={() => {
    this.props.data.handleApiGrants(apis)
      .then(() => {
        this.setState({ saveflag: true });
      })
      .catch(err => {
        // 处理错误，比如提示用户保存失败
        console.error('保存失败:', err);
      });
  }}
  

这样修改后，按钮会在saveflag为false时显示，点击后执行API请求并把saveflag设为true，之后组件重新渲染就会隐藏按钮了。

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