Question

我正在尝试进行调用，返回一个对象数组，然后通过id遍历该数组中的每个对象并进行另一个调用。通过第二次获取，我需要向原始数组中的每个对应对象添加一个新对象。请查看下面的代码示例，并预先感谢您！

步骤：

将搜索参数传递到postSearchPromise
映射结果并存储所有ID的数组
将每个ID传递到getMediaPromise（我已经定义了令牌）
将getMediaPromise中的每个响应对象添加到现有数组中的相应对象。
使用reducer存储最终结果（这是一个React Native应用程序，我在以下屏幕上使用FlatList指向此存储的数据，在数组中循环并在屏幕上显示列表）

async function search() {
   const toSend = {
     title,
     age,
     location
   };

   try {

     const results = await postSearchPromise(token, toSend);
     const theUsers = await results.map(getUsers);

     function getUsers(item) {
       var users = item.id;
       return users;
     }

     const avatars = await getMediaPromise(token, theUsers);

     const mapped = await results.map(element => ({avatar: avatars ,...element}));

     dispatch({type: 'SEARCH_RESULTS', payload: mapped});

   } catch (e) {
     console.log("The Error:" , e);
   }

}

当前，这几乎可行，但是“头像”从getUsers中获取所有ID，并将它们一次以逗号分隔的列表一起发送到“ getMediaPromise”内部，这不是目的，但我理解为什么代码就是这种方式。我不确定如何遍历每个id并将新对象添加到数组中的每个现有对象。

我开始的搜索结果：

[
 {
   id: "123",
   name: "John",
   location: "USA"
 },
 {
   id: "456",
   name: "Jane",
   location: "USA"
 },
 {
   id: "789",
   name: "Jerry",
   location: "USA"
 }
]

我需要完成的搜索结果：

[
 {
   id: "123",
   name: "John",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/123"
   }
 },
 {
   id: "456",
   name: "Jane",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/456"
   }
 },
 {
   id: "789",
   name: "Jerry",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/789"
   }
 }
]

我愿意采取一种完全不同的方式来执行此操作，但是如上所述，...我在以下屏幕上使用FlatList，因此至关重要的是这是一个对象数组，因此我的FlatList可以轻松循环在存储的数据上，并相应地拉出每块。谢谢！

通过ID映射对象数组并更新数组中的每个现有对象

0 个答案: