javascript - 为什么在类构造函数中使用setState方法时，React会引发错误？

我知道为尚未安装的组件设置状态时会引发错误。这就解释了我从使用setState函数作为对显式直接设置状态的反对中得到的错误。

import React, {Component} from 'react';

class SearchBar extends Component {

constructor(props) {
  super(props);

  this.state = {term: ''}; // -> seems to be the agreed means to set   initial state
// this.setState({term: ''}); // -> generates an error
}

render() {
  return (
    <div>
      <input onChange={event => this.setState({term:   event.target.value})}/>
      Value of the input: {this.state.term}
  </div>
);
  }
}

警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState()。这是无人值守。请检查组件的代码。

我知道如何防止错误，只需通过显式设置状态而不告诉React任何有关此错误的信息，我已经看到github问题谈论此错误:Github Issue #3878我想知道的是为什么React无法解决问题？如果有人从构造函数调用setState，它知道这是第一次使用它吗？我可能将其简化得太多了，但是如果有人对此有一个很好的技术答案，为什么呢？

最佳答案

React类始终使用名为state的属性进行初始化，该属性设置为null的值，如source code所示。如您所知，React提供了一个setState方法来操纵该属性。根据docs:

简而言之，setState()是异步的，多步骤的，不可预测的操作，它将导致组件重新渲染。调用这样的函数将需要一个对象已经完全初始化，因此在类仍在装入时就不会发生。在完全初始化类之前，它已经尝试对类执行生命周期操作。
当然，如果您希望组件以不是null的状态开始但又不希望立即导致进行多个渲染和操作的情况，则会出现问题。这就是为什么React提供一种无需依赖setState即可初始化组件状态的方法的原因。在ES5中，这是在名为getInitialState的属性内设置初始状态。但是，ES6引入了用于在使用特殊的constructor方法初始化类时设置属性的本机语法(因此React不再需要其自己的自定义版本)。这就是为什么，如果要在安装时以状态初始化React组件，则必须将其声明为this.state = {}而不使用setState()。