React类组件异步函数中无法调用setState的原因咨询

问题根源 #

你在componentDidMount里定义的fetchingData是普通函数，直接调用它时，函数内部的this并没有绑定到React组件实例，此时this为undefined，自然无法调用this.setState。而使用fetch.then()时，若直接在componentDidMount作用域内编写回调（或用箭头函数），this会正确指向组件实例，因此可以正常运行。

解决方案 #

方案1：将fetchingData改为箭头函数

箭头函数会继承外层作用域的this（即组件实例），内部可直接调用setState：

componentDidMount(){
  const fetchingData = async () => {
    let data = await fetch('https://jsonplaceholder.typicode.com/users')
    data = await data.json()
    this.setState(()=>{
      return {monsterList: data}
    })
  }
  fetchingData()
}

方案2：调用函数时绑定this

如果坚持使用普通函数，调用时通过bind将组件实例的this绑定到函数内部：

componentDidMount(){
  async function fetchingData(){
    let data = await fetch('https://jsonplaceholder.typicode.com/users')
    data = await data.json()
    this.setState(()=>{
      return {monsterList: data}
    })
  }
  fetchingData.bind(this)()
}

方案3：提前保存组件实例的this

在componentDidMount内先将组件实例的this存入变量，函数内部用该变量代替this：

componentDidMount(){
  const that = this
  async function fetchingData(){
    let data = await fetch('https://jsonplaceholder.typicode.com/users')
    data = await data.json()
    that.setState(()=>{
      return {monsterList: data}
    })
  }
  fetchingData()
}

内容的提问来源于stack exchange，提问作者Trung Lương