reactjs - componentDidMount 和构造函数

Question

 class ProductsIndex extends Component {

   constructor (props){
     super(props);

     console.log(this) // #1. this logs ProductsIndex component

     fetch('someUrl')
        .then(res => res.json())
        .then(res => console.log(this)) // #2. this logs ProductsIndex component

     fetch('someUrl')
        .then(res => res.json())
        .then(console.log)  // #3. this logs [{..},{..},{..},{..}]
   }


   componentDidMount(){
     fetch('someUrl')
        .then(res => res.json())
        .then(console.log)  // #4. this logs [{..},{..},{..},{..}]

   }

如上面的代码所示，#1 和 #2 都指向同一个 this。同样如图所示，#3 和 #4 都返回相同数组。但是，为什么下面的代码不起作用？

 class ProductsIndex extends Component {

   constructor (props){
     super(props);

     fetch('someUrl')
       .then(res => res.json())
       .then(arr => {
          this.state = {
              array: arr
          }
       })
    }

它抛出一个错误，指出 this.state 为 null，我真的不明白为什么。

下面的代码是解决方案。谁能解释一下到底有什么区别？？

 class ProductsIndex extends Component {

   constructor (props){
     super(props);

     this.state = {
       array: []
     }
   }

   componentDidMount(){
      fetch('someUrl')
         .then(res => res.json())
         .then(arr => {
            this.setState({
                array: arr
             })
          })
    }

Answer 1

问题是，当您在构造函数中发出异步请求时，promise可能会在render阶段执行后得到解决，并且此时点 this.state 为 null 并且因为您刚刚分配

this.state = {
    array: arr
}

这不会导致重新渲染，因此组件不会反射(reflect)更改。话虽如此，您应该将异步请求放在您在第二次尝试中提到的 componentDidMount 中，并且由于您在那里调用 setState ，所以 重新渲染 > 被触发，状态反射(reflect)在 render

中