Soy nuevo en el mundo de ReactJS, quiero actualizar mi enlace useState que contiene una variedad de objetos, pero ahora está actualizando los datos de acuerdo con mis requisitos, ayúdenme con esto.
Formulario de contacto.js
function ContactForm() { const [user, setUser] = useState([]); const submitForm = () => { console.log(user); }; return ( <div> <input type="text" placeholder="name" onChange={(e) => setUser((state) => [...state, { user_name: e.target.value }]) } value={user.user_name} /> <input type="text" placeholder="mobile" onChange={(e) => setUser([...user, [...user, { mobile_number: e.target.value }]]) } value={user.mobile_number} /> <button onClick={submitForm}>Submit</button> </div> ); }Estoy esperando algo como
[{ user_name:"abc", mobile_number:"123" }]debería almacenarse en mi estado, pero obtengo un resultado diferente como el siguiente
0: {user_name: "a"} 1: {user_name: "as"} 2: {user_name: "asd"} 3: (4) [{…}, {…}, {…}, {…}] 4: (5) [{…}, {…}, {…}, Array(4), {…}] 5: (6) [{…}, {…}, {…}, Array(4), Array(5), {…}]ayúdenme con este problema y díganme cómo funcionaron los objetos en una matriz en useState Gracias de antemano
(pila actualizada) Lo intenté de muchas maneras, es por eso que puede sentir lo que he escrito en el código, especialmente en el
<input/>etiqueta
De su código, supongo que user es un objeto en lugar de una matriz. Está inicializando al usuario como una matriz a pesar de que debería ser un objeto (asumiendo el uso de la palabra de user aquí, es decir, singular). Hice los siguientes cambios: -
user_name o mobile_number según sea necesario para actualizar el estado.El siguiente código debería funcionar
function ContactForm() { const [user, setUser] = useState({}); const submitForm = () => { console.log(user); }; return ( <div> <input type="text" placeholder="name" onChange={(e) => setUser({...user, user_name: e.target.value }); } value={user.user_name} /> <input type="text" placeholder="mobile" onChange={(e) => setUser({...user, mobile_number: e.target.value }) } value={user.mobile_number} /> <button onClick={submitForm}>Submit</button> </div> ); }Creo que necesitas cambiar tu setState en la entrada móvil. En este momento, está distribuyendo al usuario como una matriz cuando desea que sea un objeto. Cuando hace [... usuario] dentro de la matriz principal, crea una nueva matriz en lugar de un objeto. Además, debe asegurarse de editar el último elemento de la matriz. Asi que:
setUser([...user, {...user[user.length], mobile_number: e.target.value }])Los paréntesis obtienen el último elemento de esa matriz, no estoy seguro de si eso es lo que está buscando. Bastante seguro de que necesita alguna forma de identificar qué objeto en la matriz desea usar al editar el número de teléfono móvil.