将对象中的数组值链接到嵌套对象中的数组答案

【问题标题】：linking array values in an object to an array in a nested object将对象中的数组值链接到嵌套对象中的数组
【发布时间】：2021-12-04 00:57:06
【问题描述】：

如何获取 imageKeys 数组中的每个字符串值并使用它在嵌套对象 imageList 中的 images 数组中构造一个 url，而不改变对象？


     const myInitialStateFromParent = {
       imageKeys: ['name1', 'name2'],
       itemType: "something",
       itemName: "something else",
       ImageList:{
        images: [], 
        height: 100,
        width: 100,
        maxImages: 2
       }
     }

对于 imageKeys 中的每个键，我想在空图像数组中添加一个新对象。例如：

{url: baseUrl + '/' + 'name1'},
{url: baseUrl + '/' + 'name2'}

我想让整个对象中的其他所有内容保持不变。这是在 React 子函数组件中，useEffect(() => {}, [imageKeys])。

我试过类似的东西，

  for (const k of myInitialStateFromParent.imageKeys) {
      var img = {url: `baseUrl${k}`}
      [...myInitialStateFromParent.ImageList.images, img] // copy the images, insert new one
  }

但我收到一个错误，即仅使用最后一个形式参数进行传播。

【问题讨论】：

您没有将扩展数组分配给任何东西，因此它被视为解构分配。添加一个作业，你的代码就可以工作了。 myInitialStateFromParent.ImageList.images = [...myInitialStateFromParent.ImageList.images, img];

标签： javascript reactjs ecmascript-6

【解决方案1】：

const myInitialStateFromParent = {
  imageKeys: ['name1', 'name2'],
  itemType: "something",
  itemName: "something else",
  ImageList:{
   images: [], 
   height: 100,
   width: 100,
   maxImages: 2
  }
}

const baseUrl = 'dummyUrl';

function mapUrls(object) {
  const { imageKeys, ImageList }  = object;
  const newImagesList = {
    ...ImageList,
    images: imageKeys.map((string) => ({ url: `${baseUrl}/${string}`}))
  };
  
  return {
    ...object,
    ImageList: newImagesList
  }
}

console.log(mapUrls(myInitialStateFromParent))

【讨论】：

谢谢，但我需要 ImageList 中的图像数组中的 url，而不是 imageKeys 中的 url。图像键应保持原样。 ImageList {图像：[{url：'xdx'}]}
修复了代码。
等等，我肯定没有解释清楚。我很抱歉。我要说的是对象应该如下所示：``` const myInitialStateFromParent = { imageKeys: ['name1', 'name2'], itemType: "something", itemName: "something else", ImageList:{ images ：[{“url”：“dummyUrl/name1”}，{“url”：“dummyUrl/name2”}]，高度：100，宽度：100，maxImages：2}}```
这里不知道怎么回复code，不好意思。您创建的具有虚拟 url 的对象应该位于底部的图像数组中 - 而不是在 imagekeys 中。图像键应保持原样。
@MattoMK 再次修复。我希望这就是你所需要的）

【解决方案2】：

在您的情况下，您只需将值推送到您的图像数组：

简单的方法：

myInitialStateFromParent.imageKeys.forEach((k) => {
  myInitialStateFromParent.ImageList.images.push({ url: `baseUrl${k}` });
});

您没有在代码中分配值，为了使用您的代码并获得结果，您必须对其进行更改，并将新值分配给该数组。

艰难的路：

for (const k of myInitialStateFromParent.imageKeys) {
  const img = { url: `baseUrl${k}` };
  myInitialStateFromParent.ImageList.images = [
    ...myInitialStateFromParent.ImageList.images,
    img,
  ];
  // or 
  // myInitialStateFromParent.ImageList.images = myInitialStateFromParent.ImageList.images.concat(img);
}

【讨论】：

谢谢，但不是将一个对象推到一个数组上考虑改变对象吗？对于 react，不需要完全映射并返回一个新对象吗？
我认为这个原理与 Redux 有关，但这取决于您更新数组的情况。如果您仅在该组件中使用该对象，它不会影响您的软件。（我可能会直接在子组件中获取这些信息）

【解决方案3】：

您可以使用此代码：

const myInitialStateFromParent = {
       imageKeys: ['name1', 'name2'],
       itemType: "something",
       itemName: "something else",
       ImageList:{
        images: [], 
        height: 100,
        width: 100,
        maxImages: 2
       }
     }
myInitialStateFromParent.imageKeys.forEach(key=>{
  return myInitialStateFromParent.ImageList.images.push({url: 'baseURL'+key})
})

console.log(myInitialStateFromParent.ImageList.images)

【讨论】：