Estoy usando Formik dentro de mi aplicación React y tengo los siguientes valores iniciales, que son solo una parte:
"myInfo": [ { "myId": 0, "myName": "Name A", "defaultVal": 2 }, { "myId": 1, "myName": "Name B", "defaultVal": 4 } ]Lo que intento hacer es intentar agregar una nueva propiedad a esta matriz de objetos, pero no tengo mucha suerte.
Mi código es el siguiente:
const getAdditionalData = async (id, idx) => { try { const response = await fetch(`http://localhost:3000/more-data/${id}`); const myData = await response.json(); myInfo[idx].vals = myData; } catch (err) { console.error(err.message); } }; useEffect(() => { myInfo.map((info, index) => { getAdditionalData(info.myId, index) }); }, []); FYI, los valores devueltos en myData son otra matriz de objetos que se ve así:
cuando myId = 0 devuelve:
[{id: 1, name: 'AA'} {id: 2, name: 'BB'}] cuando myId = 1 devuelve:
[{id: 3, name: 'CC'} {id: 4, name: 'DD'} {id: 5, name: 'EE'}] Lo que intento hacer es que, mientras estoy dentro del bucle de matriz, quiero agregar una nueva propiedad dentro de la matriz myInfo . Intenté lo siguiente, que no funcionó:
myInfo[idx].vals = myData;
El resultado final que busco es el siguiente:
"myInfo": [ { "myId": 0, "myName": "Name A", "defaultVal": 2, "vals": [ {id: 1, name: 'AA'}, {id: 2, name: 'BB'} ] }, { "myId": 1, "myName": "Name B", "defaultVal": 4, "vals": [ {id: 3, name: 'CC'}, {id: 4, name: 'DD'}, {id: 5, name: 'EE'} ] } ] Verá que se ha agregado una nueva propiedad de vals .
Cualquier ayuda sería muy apreciada ya que no estoy seguro de lo que me estoy perdiendo.
Parece que está intentando usar cadenas JSON como objetos. Tienen que ser analizados primero.
Vea el siguiente ejemplo.
const myInfo = `[ { "myId": 0, "myName": "Name A", "defaultVal": 2 }, { "myId": 1, "myName": "Name B", "defaultVal": 4 } ]`; const myData = `[ {"id": 3, "name": "CC"}, {"id": 4, "name": "DD"}, {"id": 5, "name": "EE"} ]`; const parsedInfo = JSON.parse(myInfo); const parsedData = JSON.parse(myData); parsedInfo[0].vals = parsedData; console.log(parsedInfo[0]);¿Qué es myInfo ? ¿Una variable de estado, clase o referencia? También tenga en cuenta que el map devuelve una nueva matriz para que no mute.
Puede probar esto y debería ver la matriz actualizada en myNewInfo:
useEffect(() => { const myNewInfo = myInfo.map((info, index) => ({ ...info, vals: getAdditionalData(info.myId, index) })); }, []);Esto es lo que me funcionó en javascript nativo:
const getAdditionalData = async () => { try { const response = await fetch(`http://localhost:5500/data.json`); const myData = await response.json(); let newObj = []; myData.myInfo.map((data, i) => { newObj = [...newObj, { ...data, val: [...valObj[i]] }]; }); console.dir(newObj); } catch (err) { console.error(err.message); } }; const valObj = [ [ { id: 1, name: "AA" }, { id: 2, name: "BB" }, ], [ { id: 3, name: "CC" }, { id: 4, name: "DD" }, { id: 5, name: "EE" }, ], ]; getAdditionalData(); //data.json { "myInfo": [ { "myId": 0, "myName": "Name A", "defaultVal": 2 }, { "myId": 1, "myName": "Name B", "defaultVal": 4 } ] } Tenga en cuenta que necesitará sincronizar los índices de myInfo y valObj .