为什么我的 onclick 在 react js 中的每个渲染上都被调用？答案

【问题标题】：Why my onclick getting called on each render in react js?为什么我的 onclick 在 react js 中的每个渲染上都被调用？
【发布时间】：2021-08-26 11:38:39
【问题描述】：

我正在制作一个反应应用程序，并且在每次渲染时我的变量都会发生变化，即使状态变化逻辑在 onClick 函数内。

这是我的代码：

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




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

上面我最初将标志 saveflag 设置为 false，我想在单击保存按钮时更改它，但它在每次渲染时都会更改。

有人可以帮忙吗？

【问题讨论】：

你错过了() => this.props.data.handleApiGrants(apis),this.setState({saveflag:true})周围的括号

标签： javascript html reactjs components use-state

【解决方案1】：

你的语法有问题，现在可以了：

onClick={() => {
            this.props.data.handleApiGrants(apis);
            this.setState({ saveflag: true });
          }}

【讨论】：

【解决方案2】：

preventDefault 应该会有所帮助：

onClick={e => {
  e.preventDefault();
  this.props.data.handleApiGrants(apis);
  this.setState({saveflag:true});
}}

【讨论】：

工作中，谢谢
你不需要添加preventDefault，它是不必要的