Reactjs 反应状态变化不'；I don’我没有按预期工作

您好，这是我尝试从表单提交数据的代码

import * as React from 'react'

export class User extends React.Component{

    constructor(props) {
        super(props);

        this.state = {
            name: '',
            message: '',
            messages: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    render() {
        return (

            <div class="panel panel-default" id="frame1" onSubmit={this.handleSubmit}>

            <form class="form-horizontal" action="/action_page.php">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="name">Your Name </label>
                  <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" placeholder="Enter your Name"  onChange={this.handleChange} />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="message">Message</label>
                    <div class="col-sm-10">
                            <input type="text" class="form-control"  name="message" placeholder="Enter your Message" onChange={this.handleChange}/>
                    </div>
                </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" id="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
                </div>
       );
    }

    handleChange(evt) {
        this.setState({ [evt.target.name]: evt.target.value });
    }


    handleSubmit(event) {
        this.setState({ messages: this.state.message });
        alert('A name was submitted: ' + this.state.name + ' jjjjjj' + this.state.messages);
        event.preventDefault();
    }
}

import*作为来自“React”的React
导出类用户扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
消息：“”，
消息：“”
}
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
render（）{
返回(
你的名字
消息
提交
);
}
手柄更换（evt）{
this.setState（{[evt.target.name]：evt.target.value}）；
}
handleSubmit（事件）{
this.setState（{messages:this.state.message}）；
警报（'已提交名称：'+this.state.name+'jjj'+this.state.messages）；
event.preventDefault（）；
}
}

---

正如您在handleSubmit（event）方法中看到的，我将message的值设置为messages。但是当我试图打印消息时，没有设置任何值。我在这里犯了什么错。是否需要打印此值

设置状态

是异步的。试试这个：

handleSubmit(event) {
    event.preventDefault();
    this.setState({ messages: this.state.message }, () => {
        alert('A name was submitted: ' + this.state.name + ' jjjjjj' + this.state.messages);
    });
}

setState（）

并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得调用

setState（）

后立即读取

This.state

成为一个潜在的陷阱。相反，使用

componentdiddupdate

或

setState

回调（

setState（updater，callback）

），这两种回调都保证在应用更新后触发

---

可能的重复不是一个明确的重复，但这个答案应该能很好地回答问题。谢谢..前面的方法和这个方法有什么区别吗？

setState

回调中的代码在状态完成更新后执行。在您的代码中，在

setState

完成状态更新之前调用了

alert

，因为

setState

是异步的。说明：