ChangeHandler actualiza la multa estatal.
Sin embargo, actualizar el estado de id en onSubmit no parece actualizar la identificación.
El código es :
import { useState } from "react" export default function Form(props) { const [userInput, setUserInput] = useState({ name: "", url: "", id: "" }) const ChangeHandler = (e) => { const { name, value } = e.target setUserInput((prevState) => { return { ...prevState, [name]: value } }) } const clearForm = () => { setUserInput({ name: "", url: "", id: "" }) } const onSubmit = (e) => { e.preventDefault() setUserInput(prevState => { return { ...prevState, id: Math.floor(Math.random() * 100) } //does not work? }); props.onFormData(userInput) clearForm() } return ( <div> <form onSubmit={onSubmit}> <input name="name" className="input" type="text" value={userInput.name} placeholder="Name" onChange={ChangeHandler}></input> <input name="url" className="input" type="text" value={userInput.url} placeholder="url" onChange={ChangeHandler}></input> <button type="submit" className="button is-primary" >Send</button> </form> </div> ) }No necesita usar setUserInput . Solo lija parms como este:
props.onFormData({ ...userInput, id: Math.floor(Math.random() * 100) })Cuando use el cambio de estado, el estado se aplicará en el próximo renderizado. Es por eso que no puede usar el estado actualizado.
Cuando tu lo hagas
setUserInput((prevState) => { return { ...prevState, id: Math.floor(Math.random() * 100), }; }); props.onFormData(userInput); userInput aún no se habrá actualizado al nuevo valor que estableció. El nuevo valor estará disponible en el próximo renderizado, hasta entonces, userInput aún le dará el valor anterior. Si ayuda, puede pensar en setUserInput() como una función diferida que resolverá la actualización más adelante.
Puede eludir el problema colocando su nuevo estado en una variable temporal que puede usar para ambos propósitos.
const newUserInput = { ...userInput, id: Math.floor(Math.random() * 100), }; setUserInput(newUserInput); props.onFormData(newUserInput);