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绝对可以跟上用户的打字速度，甚至只需砸一下键盘即可。

为什么setState on onChange不给出最大更新深度超出错误

2 个答案: