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

Question

如何将imageKeys数组中的每个字符串值用于在嵌套对象imageList中的图像数组中构造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
}

但是我得到一个错误关于传播只与最后一个形式参数工作。

Answer 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))

Answer 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);
}

Answer 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)