Estoy tratando de agregar nuevos campos en el enlace useState
// prevstate let [currentdata, setcurrentdata] = useState({ id:'', name:'' })Intento agregar nuevos campos en el objeto así.
setcurrentdata(currentdata => ({ ...currentdata, q: quantity, }))pero no agregó nuevos campos
El fragmento de código a continuación puede ser una posible solución para lograr el objetivo deseado.
NOTA: Personalmente, no me gusta la idea de usar useState junto con dichos objetos y prefiero usar múltiples useState más simples en cada variable.
Fragmento de código
const {useState} = React; const MyFunction = () => { const [badStateObj, setBadStateObj] = useState({ id: '', name: '' }); const clickHandler = (propName) => setBadStateObj(prev => ({ ...prev, [propName]: prev[propName] || '' })); const updateHandler = (propName, propVal) => setBadStateObj(prev => ({ ...prev, [propName]: propVal })); return ( <div> {Object.entries(badStateObj).map(([k,v]) => ( <div> Key: {k}   Value: {v}     <button onClick={() => updateHandler(k, prompt( `Enter new value for ${k}` ))} > Update {k} </button> </div> ))} <button onClick={() => clickHandler(prompt('Enter prop name'))} > Add new prop </button> </div> ); }; ReactDOM.render( <div> <h4>Demo showing the useState that I personally dislike</h4> <MyFunction /> </div>, document.getElementById("react") ); <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>Explicación
badStateObj se inicializa solo con accesorios de id y nameAdd new prop , se puede agregar un nuevo accesorioclickHandler agrega el nuevo accesorio ingresado por el usuario con el valor '' .updateHandler acepta propName y propVal como parámetros y actualiza los accesorios apropiados dentro de badStateObj .