Lo que intento hacer es renderizar el contenido del diccionario correspondiente a cada índice, que tendré que modificar más adelante (tanto la clave como el valor). Por lo tanto, tengo el siguiente diccionario.
{0: {a: 'b'} 1: {c: 'd'} 2: {e: 'f'}Lo que me gustaría es representarlo dentro de un React.Fragment. Aunque indexed_data (el diccionario anterior) está lleno, por alguna razón no se muestra nada en mi componente. Intenté cambiar la forma en que devolví las claves y los objetos con Object.keys u Object.values, pero nada funcionó. ¿Puede alguien por favor ayudarme a averiguar qué está pasando? ¡Muchas gracias!
let i = 0; let indexed_data = {}; const { state } = useLocation(); useEffect(() => { for (let [key, value] of Object.entries(state)) { let object = {}; object[key] = value; indexed_data[i] = object; i += 1; } }, []); return Object.entries(indexed_data).map((elem, index) => { return Object.entries(elem).map((number, product) => { <div> <React.Fragment> { <div className="column"> <EditText name="item" defaultValue={product} /> </div> } </React.Fragment> </div>; }); });Bueno. Así que cambiemos un poco las cosas.
Tenga una variedad de objetos (he cambiado las claves/valores por algo más informativo para este ejemplo):
const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}];Tener dos estados: el primero son los datos originales (en caso de que necesite volver a ellos en algún momento); el segundo son los datos filtrados.
Luego puede map sobre la matriz filtrada para producir su JSX.
No puedo replicar todo en su código, pero este ejemplo debería ayudar a aclarar algunos malentendidos.
const { useState } = React; // Pass in the data function Example({ arr }) { // Initialise your states const [ data, setData ] = useState(arr); const [ filtered, setFiltered ] = useState(arr); // `getItems` gets the filtered array as an argument function getItems(filtered) { // `map` returns a new array return filtered.map((item, i) => { // For each object we grab the key/value from the first // element of its `Object.entries` (an array) const [key, value] = Object.entries(item)[0]; // And return some JSX // Note that we're using the `map` index to add // both a key, and a data attribute to both the list // item, and the button. We'll use that id when we // remove the item. return ( <li key={i} data-id={i}> {key}: {value} <button data-id={i} onClick={deleteItem}>Delete</button> </li> ); }); } // When we click on a button we use the id (coerced from a data // attribute string to a number) then filter out // all the objects where the id doesn't match the filter index // And then we reset the filtered state with that new array function deleteItem(e) { const { dataset: { id } } = e.target; const a = filtered.filter((item, i) => Number(id) !== i); setFiltered(a); } // Resets the data function reset() { setFiltered(data); } // Now we just call `getItems` with the // filtered state as an argument return ( <div> <ul>{getItems(filtered)}</ul> <button onClick={reset}>Reset</button> </div> ); } const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}]; ReactDOM.render( <Example arr={arr} />, document.getElementById('react') ); button { margin-left: 1em; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>