ReactJs无法从异步函数中设置componentDidMount中的状态答案

【问题标题】：ReactJs Unable to setSate in componentDidMount from async functionReactJs无法从异步函数中设置componentDidMount中的状态
【发布时间】：2020-06-13 20:35:00
【问题描述】：

我在 componentDidMount 中调用了一个异步函数 (getData())，并且我正在尝试将 this.setState 与该函数的结果一起使用。

  componentDidMount() {
    let newData = getData();
    newPodData.then(function (result) {
      console.log('result', result)
      this.setState({result})
    })
  }

但是，我在正确更新状态时遇到了问题。一些额外的上下文 - 我正在尝试使用从数据库接收到的数据来设置我的初始状态。我目前的方法正确吗？实现这一目标的最佳方法是什么？这是我的异步函数以获得更多上下文：

const getTeamData = async () => {

    const getTeamMembers = async () => {
        let res = await teamMemberService.getTeamMembers().then(token => { return token });
        return res;
    }

    const getActiveTeams = async () => {
        let res = await teamService.getActiveTeams().then(token => { return token });
        return res;
    }

    const teamMemberResult = await getTeamMembers()
    const activeTeamsResult = await getActiveTeams();

    // get team member data and add to teamMember object
    let teamMemberData = teamMemberResult.reduce((acc, curr) => {
        acc.teamMembers[curr.id] = curr;
        return acc;
      }, {
        teamMembers: {}
      });

    // get team ids and add to teamOrder array
    let activeTeamsData = activeTeamsResult.map(team => team.id)

    let key = 'teamOrder'
    let obj = []
    obj[key] = activeTeamsData;

    const newObject = Object.assign(teamMemberData, obj)

    return newObject;
}

export default getTeamData;

【问题讨论】：

标签： reactjs asynchronous setstate

【解决方案1】：

将then 处理程序中的函数更改为箭头函数应该可以修复它。例如：

componentDidMount() {
    let newData = getData();
    newPodData.then((result) => {
      console.log('result', result)
      this.setState({result})
    })
  }

但我想提出一个更好的写法。

async componentDidMount() {
    let result = await getData();
    this.setState({result})
  }

【讨论】：