Javascript 在react中设置状态后，状态为null

我在react中有一个组件，它是一个简单的表单，我有一个函数，它可以查看任何表单元素中是否有更改，然后设置正在编辑的表单元素的状态。在handleChange函数中，当我执行console.log（this.state）时，我看到了我所期望的东西，正确的键，例如（name、teamName等），以及我在表单中输入的值

但是，当我单击submit并调用函数nextStep时，我会收到一条错误消息，上面说this.state.name为null，我是否遗漏了什么

这是我的组件

var ReactDom = require('react-dom');
const uuid = require('uuid/v1');
import {postDataTest} from "../actions/postData";
import TeamSelectBox from "./TeamSelectBox";
import React, {Component, PropTypes} from "react";

class PlayerForm extends Component {

    constructor(props) {
            super(props);
            this.state = {
                name: '',
                teamName: '',
                bio: '',
                teamId: ''
            };
            this.handleChange = this.handleChange.bind(this);
        }

    handleChange(name, event) {
        this.setState({[name]: event.target.value});
        console.log(this.state);
    }

    nextStep(e) {
        e.preventDefault();
        // Get values via this.refs
        var player = {
            id: uuid(),
            name: this.state.name,
            teamName: this.state.teamName,
            bio: this.state.bio,
            teamId: this.state.teamId
         };

         postDataTest(player);
    }

    render() {
        return (
        <div className="row">
            <div className="col-md-6">
                <div className="panel">
                    <div className="panel-heading">
                        <h1>Add Player</h1>
                    </div>
                    <div className="panel-body">
                        <form className="form-horizontal">
                            <div className="form-group">
                                <label className="control-label">Name</label>
                                <input type="text" className="form-control" ref="name" defaultValue={this.state.name} onChange={this.handleChange.bind(this, 'name')}/>
                            </div>
                            <div className="form-group">
                                <label className="control-label">Team Name</label>
                                <input type="text" className="form-control" ref="teamName" defaultValue={this.state.teamName} onChange={this.handleChange.bind(this, 'teamName')}/>
                            </div>
                            <TeamSelectBox state={this.state.teamId} onChange={this.handleChange.bind(this, 'teamId')}/>
                            <div className="form-group">
                                <label className="control-label">Bio</label>
                                <input type="textarea" className="form-control" ref="bio" defaultValue={this.state.bio} onChange={this.handleChange.bind(this, 'bio')}/>
                            </div>
                            <div className="bs-component">
                                 <button className="btn btn-md btn-default btn-block" onClick={this.nextStep}>Save &amp; Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        )
    }
}

module.exports = PlayerForm;

var ReactDom=require（'react-dom'）；
const uuid=require（'uuid/v1'）；
从“./actions/postData”导入{postDataTest}；
从“/TeamSelectBox”导入TeamSelectBox；
从“React”导入React，{Component，PropTypes}；
类PlayPerform扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
团队名称：“”，
个人简历：''，
团队ID:“”
};
this.handleChange=this.handleChange.bind（this）；
}
handleChange（名称、事件）{
this.setState（{[name]：event.target.value}）；
console.log（this.state）；
}
下一步（e）{
e、 预防默认值（）；
//通过this.refs获取值
变量播放器={
id:uuid（），
名称：this.state.name，
团队名称：this.state.teamName，
bio:this.state.bio，
teamId:this.state.teamId
};
postDataTest（播放器）；
}
render（）{
返回(
添加玩家
名称
队名
生物
保存并继续
)
}
}
module.exports=播放性能；

setState

不会立即改变状态，因此必须使用setState中的

回调来记录更新的值

handleChange(name, event) {
    this.setState({[name]: event.target.value}, function() {
            console.log(this.state);
    });

}

另外，您没有绑定
nextStep
函数。您应该使用构造函数或您喜欢的任何其他方式来实现这一点


类PlayPerform扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
团队名称：“”，
个人简历：''，
团队ID:“”
};
this.handleChange=this.handleChange.bind（this）；
this.nextStep=this.nextStep.bind（this）；
}
handleChange（名称、事件）{
this.setState（{[name]：event.target.value}）；
console.log（this.state）；
}
下一步（e）{
e、 预防默认值（）；
//通过this.refs获取值
变量播放器={
身份证号码：“9879”，
名称：this.state.name，
团队名称：this.state.teamName，
bio:this.state.bio，
teamId:this.state.teamId
};
postDataTest（播放器）；
}
render（）{
返回(
添加玩家
名称
队名
生物
保存并继续
)
}
}
ReactDOM.render（，document.getElementById（'app'））
setState
不会立即改变状态，因此必须使用setState中的
回调来记录更新的值

handleChange(name, event) {
    this.setState({[name]: event.target.value}, function() {
            console.log(this.state);
    });

}

另外，您没有绑定
nextStep
函数。您应该使用构造函数或您喜欢的任何其他方式来实现这一点


类PlayPerform扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
团队名称：“”，
个人简历：''，
团队ID:“”
};
this.handleChange=this.handleChange.bind（this）；
this.nextStep=this.nextStep.bind（this）；
}
handleChange（名称、事件）{
this.setState（{[name]：event.target.value}）；
console.log（this.state）；
}
下一步（e）{
e、 预防默认值（）；
//通过this.refs获取值
变量播放器={
身份证号码：“9879”，
名称：this.state.name，
团队名称：this.state.teamName，
bio:this.state.bio，
teamId:this.state.teamId
};
postDataTest（播放器）；
}
render（）{
返回(
添加玩家
名称
队名