[英]State not being updated in React.js
我在 react.js 中创建了一个基本表单,我可以在用户提交表单后获取值。
但是,当我尝试使用handleSubmit
函数更改值时,我看不到状态中所做的更改。
我已经制作了一个状态的副本,并且更改正在被复制的状态中反映出来。 但是当我将旧状态设置为等于更新状态时,更改不会反映出来
我的代码如下
state = {
name: null,
ContactNumber: null
}
handleChange = (event) => {
this.setState({
[event.target.name] : event.target.value
})
}
handleSubmit = (event) => {
event.preventDefault()
let Copystate = JSON.parse(JSON.stringify(this.state))
Copystate.ContactNumber = 100
console.log(Copystate) // displaying the contact number as 100
this.setState({
state : Copystate
})
console.log(this.state) // displays the number which was submitted in the form
}
render(){
return(
<div>
<h2>Form</h2>
<form onSubmit={this.handleSubmit}>
<div>
<label>Name</label>
<input type="text" name="name" required = {true} onChange = {this.handleChange}/>
<label>Contact Number</label>
<input type="number" name="ContactNumber" required = {true} onChange = {this.handleChange}/>
<button type="submit" label="submit" >Submit</button>
</div>
</form>
</div>
);
}
}
谁能让我知道我哪里出错了? 谢谢
注意:setState 是异步的:document state-updates-may-be-asynchronous
您可以使用回调函数来获取更新的状态
this.setState({state: Copystate}, () => {console.log(this.state)});
或者你可以选择使用async/await
handleSubmit = async (event) => {
await this.setState({state: Copystate});
console.log(this.state);
}
这两种方法不会影响重新渲染,因为一旦状态更新,重新渲染就会继续。
如果您在render()
console
,您会发现它应该始终最终更新。
render() {
console.log(this.state);
return (
...
)
}
setState 是异步的。 因此,您可以执行以下操作之一 - 1. 在 setState 中进行回调以记录状态或 2. 在渲染函数中编写控制台语句。
你为什么这么做?
let Copystate = JSON.parse(JSON.stringify(this.state))
Copystate.ContactNumber = 100
您可以将handleSubmit
更改为如下所示:
handleSubmit = (event) => {
event.preventDefault();
let { ContactNumber } = this.state;
ContactNumber = 100;
console.log(ContactNumber); // displaying the contact number as 100
this.setState({
ContactNumber: ContactNumber
}, () => {
console.log(this.state) // displays the number which was submitted in the form
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.