¿Cómo tomo cada valor de cadena en la matriz imageKeys y lo uso para construir una URL en la matriz de imágenes en el objeto anidado imageList, sin mutar el objeto?
const myInitialStateFromParent = { imageKeys: ['name1', 'name2'], itemType: "something", itemName: "something else", ImageList:{ images: [], height: 100, width: 100, maxImages: 2 } }para cada clave en imageKeys, quiero agregar un nuevo objeto en la matriz de imágenes vacía. p.ej:
{url: baseUrl + '/' + 'name1'}, {url: baseUrl + '/' + 'name2'}Quiero mantener todo lo demás en todo el objeto igual. Esto está en un componente de función secundaria de React, useEffect(() => {}, [imageKeys]).
Intenté algo como,
for (const k of myInitialStateFromParent.imageKeys) { var img = {url: `baseUrl${k}`} [...myInitialStateFromParent.ImageList.images, img] // copy the images, insert new one }Pero recibo un error sobre la propagación que solo funciona con el último parámetro formal.
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))En su caso, solo necesita enviar valores a su matriz de imágenes:
Manera fácil:
myInitialStateFromParent.imageKeys.forEach((k) => { myInitialStateFromParent.ImageList.images.push({ url: `baseUrl${k}` }); });No está asignando valores en su código, para usar su código y obtener resultados, debe cambiarlo y asignar los nuevos valores a esa matriz.
Manera difícil:
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); }Puedes usar este código:
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)