ReactJs中map循环内调用接口push数组时数据重复覆盖问题

错误原因 #

• 你在每个单独API请求的成功回调里，都新建了空数组，并且按照原数组的长度循环，把当前单次API的返回值重复push了N次（N等于原数组长度），所以每次请求完成都会打印一个全是当前返回值的数组，出现你看到的重复结果。
• 没有等待所有异步API请求全部完成就收集结果，也没有按顺序存储不同请求的返回值。
• 额外问题：你代码里取的是data.poster_path，但你明确说明API返回的data本身就是字符串类型，直接用data即可，取poster_path属性会得到undefined。

正确代码实现 #

useEffect(() => {
  // 把每个id转为API请求的Promise实例
  const requestList = moviesId.arr.map(id => ApiMovieList(id))
  // 等待所有请求完成，按原顺序返回结果
  Promise.all(requestList).then(result => {
    // result就是你需要的数组B，顺序和moviesId.arr一一对应
    const UserDataEntry = result
    console.log(UserDataEntry)
    // 后续可将结果存入state用于页面渲染
  })
// 给useEffect添加依赖项，避免无意义的重复执行
}, [moviesId.arr])

代码说明 #

• Promise.all接收一个Promise数组，会等待所有Promise都成功后才触发回调，返回的结果数组顺序和传入的Promise数组顺序完全一致，刚好匹配你需要的和原数组项一一对应的要求。
• 不需要手动循环push值，Promise.all返回的结果已经是组装好的目标数组。

内容的提问来源于stack exchange，提问作者Marin