如何獲取 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
}
但是我收到了一個關于僅使用最后一個形式引數進行傳播的錯誤。
uj5u.com熱心網友回復：
在您的情況下，您只需要將值推送到您的影像陣列：
簡單的方法：
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);
}
uj5u.com熱心網友回復：
您可以使用此代碼：
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)uj5u.com熱心網友回復：
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 } = object;
return {
...myInitialStateFromParent,
imageKeys: imageKeys.map((string) => ({ url: `${baseUrl}/${string}`}))
}
}
console.log(mapUrls(myInitialStateFromParent))轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318237.html