¿Cómo almaceno los datos de entrada como objetos en una matriz usando useState ? Por favor ayuda. Necesito ayuda. No puedo obtener la salida deseada para mostrar los valores de entrada.
const Form = () => { const [allNotes, setAllNotes] = useState([{}]); const [notes, setNotes] = useState({ name: "", age: "", class: "", request: "", }); const nameChangeHandler = (event) => { setNotes((prevState) => { const newState = { ...prevState, name: event.target.value }; return newState; }); }; const ageChangeHandler = (event) => { setNotes((prevState) => { const newState = { ...prevState, age: event.target.value }; return newState; }); }; const classChangeHandler = (event) => { setNotes((prevState) => { const newState = { ...prevState, class: event.target.value }; return newState; }); }; const requestChangeHandler = (event) => { setNotes((prevState) => { const newState = { ...prevState, request: event.target.value }; return newState; }); }; const submitHandler = () => { setAllNotes((prevState) => { const newState = { ...prevState, name: notes.name, age: notes.age, class: notes.class, request: notes.request, }; return newState; }); };Todo se ve bien, tal vez excepto por dos pequeños errores:
Hagamos que el estado inicial de all notes sea solo una matriz vacía, como
const [allNotes, setAllNotes] = useState([]);
La nueva matriz dentro de setAllNotes debe ser una matriz , no un objeto , como:
const submitHandler = () => { setAllNotes((prevState) => { const newState = [ ...prevState, { name: notes.name, age: notes.age, class: notes.class, request: notes.request, } ]; return newState; }); };¡Espero que esto lo haga funcionar!