在地图中制作 array.push 正在覆盖以前的数据（reactJs）

Question

我有一个数组 (A) return 我在 Api 调用的参数函数中使用了很多项目，所以我用这个数组制作了一个地图，对于每个项目，我进行 API 调用，然后使用数据响应创建一个新数组 (B)。

问题： 数组 B 由相同数量的项目组成，但这些项目正在重复，而不是唯一的项目。

我的代码：

useEffect(() => {
  // the Array A in the question \/ // 

    moviesId.arr.map((item) => {

  // the Api Call function in the question \/  //    
 
      ApiMovieList(item).then((data) => {

        let a = [];

        for (var x = 0; x < moviesId.arr.length; x++) {
          a.push(data.poster_path);
        }

     // the Array B in the question \/ //  

         var UserDataEntry = a || [];

        
         console.log(UserDataEntry);
 


      });
    });
  });

Console show this:

    (2) ["Matrix", "Matrix"] 
      
       Instead of this:
   (2) ["Ghost", "Matrix"]

请问我该如何解决？

我的数据：

moviesId.arr = ["451048", "436969"]

ApiMovieList(item).then((data) => data 等于一个字符串 ("Matrix", "Ghost", 例如，它取决于 moviesId.arr

的位置

Answer 1

您不应将 .map 用于副作用。您正在迭代 moviesId.arr 数组和然后为每个元素将 moviesId.arr.length 个 data.poster_path 值推入数组a。这是您的重复项的来源。

我建议加载 Promise 数组中的 ApiMovieList(item) 调用，并使用 Promise.all 等待它们全部解决。然后，您将得到一组已解析的海报路径，以设置为 UserDataEntry 并记录。

useEffect(() => {
  // the Array A in the question
  const posterReqs = moviesId.arr.map(item => {
    return ApiMovieList(item).then(data => data.poster_path);
  });

  Promise.all(posterReqs).then(posters => {
    // the Array B in the question
    const UserDataEntry = posters || []; 
    console.log(UserDataEntry);
  });
});

在地图中制作 array.push 正在覆盖以前的数据（reactJs）

make an array.push inside a map is getting overwriting previous data (reactJs)

javascript

arrays

reactjs

map-function