Estoy configurando el valor de una entrada a una propiedad en un objeto (del estado). Tengo un evento onChange para actualizar el estado. Sin embargo, cuando trato de escribir, en realidad no se actualiza en la entrada. Si no uso un objeto y solo tengo una cadena, funciona bien. ¿Cómo puedo arreglar esto?
Demostración del problema
Mi código:
import React from "react"; export function App() { const [data, setData] = React.useState({ test: "hello" }); const change = (e) => { data.test = e.target.value; setData(data); }; return <input value={data.test} onChange={change}></input>; }Según el comentario de Aman Sadhwani , utilicé la sintaxis extendida para actualizar el estado sin modificar el objeto original.
const change = (e) => { setData({ ...data, test: e.target.value }); };Gracias, @Aman Sadhwani. Utilice el operador Spread para actualizar el estado.
import React from "react"; export function App() { const [data, setData] = React.useState({ test: "hello" }); const change = (e) => { setData({ ...data test:e.target.value }); }; return <input value={data.test} onChange={change}></input>; }