Состояние равно null после установки состояния в реакции

Question

У меня есть компонент в реакции, который является простой формой, у меня есть функция, которая выглядит, если есть изменение в любом из элементов формы, а затем устанавливает состояние элемента формы, являющегося изм. В функции handleChange, когда я делаю console.log (this.state), я вижу точную вещь, которую я ожидаю, правильные ключи, например (name, teamName и т. Д.) Со значениями, введенными мной в форму.

Однако, когда я нажимаю кнопку «Отправить», и он вызывает функцию 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; 

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>