Estoy tratando de actualizar el contexto a través de la variable "estado" aquí y luego representarlo en otro componente. La representación funciona bien, pero no la primera vez que se envía el formulario aquí, solo la segunda, la tercera, etc. ¿Alguna idea de cómo resolver esto? Traté de mover dispatchDataState({ type: "ADD_DATA", payload: state }) a useEffect pero luego no puedo eliminar el valor ingresado en las entradas después de enviarlo. ¿Alguna idea?
import React, { useContext, useState, useEffect } from "react"; import DataContext from "../store/data-context"; function Form() { const [name, setName] = useState(""); const [secName, setSecName] = useState(""); const [tel, setTel] = useState(""); const [note, setNote] = useState(""); const [state, setState] = useState({ name: "", secName: "", tel: "", note: "", }); const { dispatchDataState } = useContext(DataContext); const handleSubmit = (e) => { e.preventDefault(); console.log(name); setState({ name: name, secName: secName, tel: tel, note: note, }); dispatchDataState({ type: "ADD_DATA", payload: state }); console.log(state); }; return ( <div> <form onSubmit={handleSubmit}> <label> Jméno <input type="text" required value={name} onChange={(e) => setName(e.target.value)} /> </label> <label> Příjmení <input type="text" required value={secName} onChange={(e) => setSecName(e.target.value)} /> </label> <label> Telefonní číslo <input type="text" required value={tel} onChange={(e) => setTel(e.target.value)} /> </label> <label> Poznámka <input type="text" value={note} onChange={(e) => setNote(e.target.value)} /> </label> <input type="submit" value="Odeslat" /> </form> </div> ); } export default Form;Parte del problema es: el método useState set no refleja el cambio de inmediato . Y le recomendamos encarecidamente que lea y comprenda eso.
Pero la raíz del problema aquí parece ser que también está duplicando el estado. Almacenar los mismos valores en múltiples variables de estado e intentar mantenerlos sincronizados manualmente. ¿Por qué?
Solo mantén los valores de estado que quieras:
const [name, setName] = useState(""); const [secName, setSecName] = useState(""); const [tel, setTel] = useState(""); const [note, setNote] = useState("");Y luego envíe el contexto usando esos valores:
const handleSubmit = (e) => { e.preventDefault(); const state = { name, secName, tel, note, }; dispatchDataState({ type: "ADD_DATA", payload: state }); console.log(state); };O, si desea que el "estado" sea un objeto:
const [state, setState] = useState({ name: "", secName: "", tel: "", note: "" });Y enviar eso:
const handleSubmit = (e) => { e.preventDefault(); dispatchDataState({ type: "ADD_DATA", payload: state }); console.log(state); }; Por supuesto, en ese caso también tendría que actualizar sus controladores de change . Por ejemplo:
<input type="text" required value={state.name} onChange={(e) => setState({ ... state, name: e.target.value })} /> Y así sucesivamente para sus otros campos de input .
Pero, en general, el punto es que el "estado" no reemplaza todas las variables posibles en React. Solo está allí para, bueno, almacenar el estado. Puede crear nuevas variables como en cualquier otro lugar en JavaScript para reestructurar los datos del estado para otros fines.