Tengo un formulario de reacción simple, pero cuando registro en la consola el estado de mi objeto, aparece como valores vacíos. He estado sentado por un tiempo tratando de ingresar mis valores. Cuando registro el evento en la consola, obtengo los valores en mi consola, pero no puedo registrar mi objeto de estado. Aquí está mi código:
handleSubmit = (event: any) => {
event.preventDefault();
event.persist();
this.setState({
IPObject: {
Name: event.target[0].value,
IPList: event.target[1].value,
priority: event.target[2].value,
rule: event.target[3].value
}
})
console.log(this.state.IPObject)
render() {
return (
<Form className="mui-form" onSubmit={this.handleSubmit}>
<legend>Add your IP address</legend>
<label>Your Name</label>
<Input placeholder="Name" required={true}></Input>
<label>Your IP Address</label>
<Input placeholder="IP address" required={true}></Input>
<label>Priority Rule (Add any number from 400 and above)</label>
<Input placeholder="Priority Rule" required={true}></Input>
<label>Subnet (Leave on 24 by default) Unless you know what you doing</label>
<Select defaultValue="24">
<Option value="32" label="32"></Option>
<Option value="24" label="24"></Option>
</Select>
<br></br>
<Button variant="raised">Add IP</Button>
</Form>
);
y esto es en mi estado:
this.state = {
IPObject: {
priority: "",
IPList: "",
rule: "",
Name: ""
}
}
¿Esto responde a tu pregunta? setState no actualiza el estado inmediatamente
- ggorlen
28 de marzo de 2021 a las 8:33
setState es asíncrono. No verás el valor hasta el siguiente renderizado.
- ggorlen
28 de marzo de 2021 a las 8:34
------------------------------------
setState es una función asíncrona, úsela así para obtener resultados:
this.setState({...}, ()=>{console.log(...)});
y en tu código:
this.setState({
IPObject: {
Name: event.target[0].value,
IPList: event.target[1].value,
priority: event.target[2].value,
rule: event.target[3].value
}
}, ()=>{
console.log(this.state.IPObject)
})
------------------------------------
Su suposición es errónea, no puede hacerlo de manera procesal y actualice el estado sincrónicamente y luego regístrelo en la siguiente línea, porque técnicamente console.log se activará antes de la actualización del estado real. Si desea realizar un seguimiento de los cambios de estado, utilice useEffect/componentDidUpdate y realice un seguimiento del cambio de estado.
------------------------------------
Prueba esto
handleSubmit = (event: any) => {
event.preventDefault();
event.persist();
this.setState({
IPObject: {
Name: event.target[0].value,
IPList: event.target[1].value,
priority: event.target[2].value,
rule: event.target[3].value
}
}, () => {
console.log(this.state.IPObject)
})
