onClick在组件重新渲染时重复调用（不应该）

Question

我有一个反应组件，它是一种形式。当用户单击发送/提交按钮时，将调用一个函数来处理数据保存并执行一些其他任务。

问题是在用户单击按钮后，组件似乎重新渲染了几次（很可能是因为它从其他组件接收的外部道具更新了）。这本身不是问题。

但是，当组件更新时，即使用户没有再次单击该按钮，也会再次调用onClick函数。

这是我不明白的部分。为什么组件更新时会触发< code>onClick函数？我该如何防止这种情况发生？

我不想在用户单击按钮后停止组件更新。因为用户可能想要更改表单中的某些内容并再次发送。

简而言之，该组件如下所示:

class Form extends Component{
  constructor(props) {
    super(props);
    this.state = {
      input: '',
    }
  }
  
  save() {
    // do something
    // and something else...
    alert('data saved!');
  }

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            onChange={(e) => {this.setState({input: e.target.value})}}
            value={this.state.input}
          />
        </div>
        <div onClick={this.save.bind(this)}>
         <span>submit</span>
        </div>
      </div>
    )
  }
}

*更新，我想我知道出了什么问题。

我在上面的帖子中没有提到的是，在< code>save函数中有一个firebase auth事件监听器，用于确保用户通过身份验证。它看起来像这样:

save () {
  firebase.auth().onAuthStateChanged(function(user) {
              if (user) {
                 // do something
                 // and something else
                 alert('data saved');
              } else {
                // do something else
              }
  });
}

在用户提交之后，由于某种原因，事件监听器被触发了多次(不应该触发)。底线是his与组件更新无关。

现在，我已为事件侦听器分配了一个值，并在触发一次后将其设置为 null，如下所示：

save () {
  const that = this;
  this.html" target="_blank">firebaseListener = firebase.auth().onAuthStateChanged(function(user) {
              if (user) {
                 // do something
                 // and something else
                 alert('data saved');
                 that.firebaseListener = null; 
              } else {
                // do something else
              }
  });
  this.firebaseListener && this.firebaseListener();
}

到目前为止，这似乎是有效的...

Answer 1

关于你的firebase困境，请看这个答案:如何在react中删除新的firebase onAuthStateChanged监听器

听起来您的方向是正确的，但您可能希望在生命周期的早期设置auth侦听器。这样，您的用户在尝试保存表单之前就知道他们已经登录了。不过，这取决于您的用例。

不要在渲染中使用箭头函数或绑定。请改为执行以下操作：

class Form extends Component{
  constructor(props) {
    super(props);
    this.state = {
      input: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.save = this.save.bind(this);
  }

  handleChange(e) {
    this.setState({input: e.target.value});
  }

  save() {
    // do something
    // and something else...
    alert('data saved!');
  }

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            onChange={this.handleChange}
            value={this.state.input}
          />
        </div>
        <div onClick={this.save}>
          <span>submit</span>
        </div>
      </div>
    )
  }
}

此更改将修复窗体的重新呈现。这是因为每次调用render时函数都会更改，这可能会触发重新呈现。