Question

我正在从两个API提取数据并得到： -一组用户对象，每个对象都有一个ID -一组会议对象，每个对象的所有者ID与用户ID对应

我只想在Home组件中一次获取所有这些数据，并在页面上呈现与其各自所有者的所有会议。它有时可以工作，但偶尔会引发TypeError：无法读取未定义的属性“ first_name”。我认为这是因为它是异步的，但是我的操作都使用了async await语法，而且我不确定自己在做什么错。

动作（fetchUsers外观相同）

export const fetchMeetings = () => async dispatch => {
  const response = await api.get('/meetings');
  dispatch({ type: 'FETCH_MEETINGS', payload: response.data });
};

在组件中：

  componentDidMount() {
    this.props.fetchMeetings();
    this.props.fetchUsers();
  }
...
  const getOwnerName = ownerID => {
    const owner = users.filter(user => user.id === ownerID)[0]
    return `${owner.first_name} ${owner.last_name}`
  }

  const meetingsArray = meetings.map(meeting => 
    <div key={meeting.callid}>
      <Meeting
        name={meeting.name}
        startTime={meeting.start_time}
        endTime={meeting.end_time}
        owner={getOwnerName(meeting.owner)} />
    </div>
  )

Answer 1

您正在使用async / await inside （内部） fetchMeetings(...)方法，但这并不影响此函数在功能的 outside （外部）运行的方式。 fetchMeetings(...)和fetchUsers (...)仍将异步运行在componentDidMount(...)中。

我相信只有在fetchUsers(...)先完成后才能起作用。尝试解决此问题：

async componentDidMount() {
   await this.props.fetchUsers();
   await this.props.fetchMeetings();
}

如何映射从API提取的两项的值？

1 个答案: