在反应中设置状态后状态为空[重复]

Question

我有一个 react 组件，它是一个简单的表单，我有一个函数可以查看任何表单元素是否发生变化，然后设置正在编辑的表单元素的状态。在我执行 console.log(this.state) 时的 handleChange 函数中，我看到了我所期望的确切内容，正确的键，例如（名称、团队名称等）以及我在表单中输入的值。

但是，当我单击提交并调用函数 nextStep 时，我收到一条错误消息，提示 this.state.name 为空，我在这里遗漏了什么吗？

这是我的组件。

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;

Answer 1

setState 不会立即改变状态，因此您必须使用callback in setState 来记录更新后的值

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

}

您也没有绑定nextStep 函数。您应该在构造函数中或您喜欢的任何其他方式中执行此操作

class PlayerForm extends React.Component {

    constructor(props) {
            super(props);
            this.state = {
                name: '',
                teamName: '',
                bio: '',
                teamId: ''
            };
            this.handleChange = this.handleChange.bind(this);
            this.nextStep = this.nextStep.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: "9879",
            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>
                            
                            <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>
        )
    }
}

ReactDOM.render(<PlayerForm/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>