Espero que esta sea una respuesta simple, pero me está destrozando el cerebro. Digamos que tengo el siguiente pseudocódigo de React:
const [cats, setCats] = useState({}); console.log(cats); cats = { }Estoy tratando de agregar uh cats al objeto cats haciendo clic en un botón. No estoy seguro de cuál debería ser el código exacto, ya que cualquier conjetura que tengo hasta ahora no funciona. Lo más cercano que he conseguido es el siguiente pseudocódigo:
aquí está el objeto que estoy enviando:
{ Bruto:{ id : 2, name: 'Bruto', } } const addCat (e, catName) => { setCats(...cats, event.target.value); } <input onKeyDown={e=>addCat(e,catDetails)}></input>Lo único que hace es simplemente agregar la palabra escrita en la entrada como gatos, pero no la agrega estructuralmente. Idealmente, lo que querría es lo siguiente:
1. Check to see if catDetails exists in cats 2. If not, add the catDetails.id to the object 3. Add catDetails.name to cats[catDetails.id] such as the object should be: cats{ 0: { name: "Heathcliff" } 2: { name: "Bruto" } }Esperando que alguien pueda ayudar. A continuación se muestra el código que tengo hasta ahora
const addTag = (event, cats) => { if (event.key === "Enter"){ setCats(...cats, event.target.value) } console.log(cats); }¡Gracias!
Tu puedes hacer:
setCats( prevCats => {...prevCats, {id:2, name:"Bruto"});O si quieres los ID como claves:
setCats( prevCats => {...prevCats, [id]: name}); En lugar de pasar el nuevo estado a setCats , pasa una función que recibirá automáticamente el estado anterior, y lo que se devuelva se usará como el nuevo estado.
O incluso mejor: puedes usar useReducer en lugar de useState
Probablemente encontrará una matriz más fácil de usar.
Tenga un estado (una matriz) para todos sus objetos de gato, y tenga otra (cadena) para el gato que está agregando en la entrada, y luego actualice la matriz de gatos con el gato actual si no se encuentra.
const { useEffect, useState } = React; function Example() { // Initialise cat states const [ cats, setCats ] = useState([]); const [currentCat, setCurrentCat] = useState(''); // Updates the currentCat state when the input changes function handleChange(e) { setCurrentCat(e.target.value); } // First find out if the cat name we're entering exists // in the cats array. If it doesn't, add it function addCat(e) { const found = cats.find(cat => cat.name === currentCat); if (!found) { setCats([ ...cats, { id: cats.length + 1, name: currentCat } ]); } } useEffect(() => console.log(cats), [cats]); return ( <div> <input type="text" onChange={handleChange} /> <button type="button" onClick={addCat} >Add cat </button> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <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>