ReactJs无法通过异步功能在componentDidMount中设置setSate

Question

我正在getData()中调用一个异步函数（componentDidMount，而我正在尝试将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;

Answer 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})
  }