为什么 onChange 上的 setState 没有给出超出最大更新深度的错误

Question

当我们在 render 方法中使用 setState 时，为什么这段代码没有给出超出的最大更新深度。

 class Test extends Component {
  state = {
    name: ""
  };

  handleChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    return (
      <div>
        <input type="text" name="name" onChange={this.handleChange} />
      </div>
    );
  }
}

Answer 1

this.handleChange 仅在输入字段发生变化时调用。只有当您像这样调用函数时才会超过最大更新深度：onChange{this.handleChange()} 因为它会自动重新呈现（调用 setState）本身并进入无限循环。您应该阅读有关 onchange 属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange

Answer 2

仅当 setState 更改页面上的某些内容导致重新呈现，并且该重新呈现导致另一个重新呈现，这将进入无限循环时，才会发生超出最大更新深度错误。 setState 包含在 onChange 事件处理程序中，不会导致无限循环，只有在用户输入时才会更新。 React绝对可以跟得上用户的打字速度，甚至只是砸键盘。

为什么 onChange 上的 setState 没有给出超出最大更新深度的错误

Why does setState on onChange does not give Maximum update depth exceeded error

setstate

reactjs