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

Question

我正在制作一个 React 应用程序，即使状态更改逻辑在 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，我想在单击保存按钮时更改它，但它在每次渲染时都会更改。

有人可以帮忙吗？

Answer 1

preventDefault 应该有帮助：

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

Answer 2

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

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

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

Why my onclick getting called on each render in react js?

html

javascript

components

reactjs

use-state