Javascript 未在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>
        );
    }
}

state={
名称：空，
联系人号码：空
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
}
handleSubmit=（事件）=>{
event.preventDefault（）
让Copystate=JSON.parse（JSON.stringify（this.state））
Copystate.ContactNumber=100
console.log（Copystate）//将联系人号码显示为100
这是我的国家({
州：Copystate
})
console.log（this.state）//显示表单中提交的编号
}
render（）{
返回(
形式
名称
联系电话
提交
);
}
}

---

谁能告诉我哪里出了问题？谢谢

注意：setState是异步的：文档

您可以使用回调函数获取更新的状态

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
        })
    }