0
161
VistasError al mostrar dónde hay una matriz dentro del objeto
esto es lo que muestran los datos dentro de la consola:
Intenté mostrarlo con estos pero falló
{Object.entries(value).map(([key, value]) => { return ( <p key={key}> <li> {key} {value} {console.log(value.id)} //this will show as undefined </li> </p> ); })} {value} mostrará este error:
Los objetos no son válidos como hijos de React (encontrado: objeto con claves {color, cantidad}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
{value.id} o {value.name} se mostrarán como indefinidos
Con el mapa, dirá que value.map no es una función
{value.map((value, key) => ( <> <div>{value.id}</div> <div>{value.name}</div> </> ))}códigos y caja: https://codesandbox.io/s/display-the-manipulated-data-dy204r
2 Respuestas
Responde la pregunta0
Su objeto tiene una estructura compleja, y para iterar, debe verificar si uno de los elementos es Array usando Array.isArray() , en caso afirmativo, luego haga un bucle y utilícelo, de lo contrario, use las propiedades directamente
A continuación se muestra el código de trabajo de la simulación de su objeto y la iteración. Acabo de registrar los valores, puedes usarlos de la forma que quieras
let myObj = { s: [{ color: 'a', q: '8' }, { color: 'b', q: '2' }], name: 'Anne', id : 18 } Object.keys(myObj).forEach(function(key) { if (Array.isArray(myObj[key])) { myObj[key].forEach(function (item, index) { console.log(item.color); console.log(item.q); }); } else console.log(myObj[key]) });0
puedes hacer algo como esto
{Object.entries(value).map((v, key) => { return ( <p key={key}> <li> {key} {v.name} {console.log(v.id)} //this will show as undefined </li> </p> ); })}