React 状态未在应用程序中更新，但我可以 console.log 更正更新后的状态

Question

我有一个使用 es6 class 创建的表单。该表单是有状态的，并在更改时更新其状态。表单状态中的信息向上传递到应用程序组件 onSubmit。我可以 console.log 通过在我的表单和应用程序组件的方法中传递的状态的每一步，它的行为符合预期。在此代码示例中，我在应用程序中设置状态后拥有控制台，它按我的预期注销了添加了输入值的状态对象。

问题是当我查看 React 开发者工具时，状态没有更新。此外，如果我将控制台语句移动到 setState 方法中的回调函数中，它不会记录任何内容。

我的问题是如何解决这个问题，更重要的是，当应用程序中的状态似乎没有实际更新时，为什么我能够用我正在寻找的值注销状态？

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      appointments: [{title:'first appointment'}]
    };
    this.updateAppointments = this.updateAppointments.bind(this);
  }

  updateAppointments(newAppointment) {
    var newAppointmentList = this.state.appointments;
    newAppointmentList.push(newAppointment);
    this.setState= {
      appointments: newAppointmentList,
      //This console logs nothing
      function() {
        console.log(this.state.appointments);
      }
    }; 
    //This console logs out the state as expected with the new appointment 
    //added even thought the state in the app does not appear to have the 
    //appointment added when I look in the react dev tools  
    console.log(this.state.appointments);  
  }

  render() {
    return (
      <div className="App">
        <AppointmentForm addAppointment = {this.updateAppointments} />        
      </div>
    );
  }
}

class AppointmentForm extends Component {
  constructor (props) {
    super(props)
    this.state = {
      appointmentTitle: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleTitleChange = this.handleTitleChange.bind(this);
  }
  handleTitleChange(event) {
    this.setState({appointmentTitle: event.target.value});
  }
  handleSubmit(e) {
    let newAppointment = {
      title: this.state.appointmentTitle
    }
    e.preventDefault();
    this.props.addAppointment(newAppointment);
  } 
  render() {
    return (
      <div>          
          <form onSubmit={this.handleSubmit}>
            <FormGroup controlId="appointmentTitle">
              <ControlLabel>Appointment Title</ControlLabel>
              <FormControl type="text" placeholder="Appointment Title" value={this.state.appointmentTitle}
              onChange={this.handleTitleChange}/>
            </FormGroup>
          </form>        
      </div>
    );
  }
}

Answer 1

您正在以错误的方式更新状态。

而不是：

this.setState = {

这样写：

updateAppointments(newAppointment) {
    var newAppointmentList = this.state.appointments.slice();
    newAppointmentList.push(newAppointment);
    this.setState({
        appointments: newAppointmentList, () => {
           console.log(this.state.appointments);
        }
    }) 
}

建议：永远不要直接改变状态值，所以首先使用slice()创建state数组的副本，推送新值然后使用setState 更新 state.

Answer 2

您的代码有误。您正在设置 setState 属性，而不是调用 setState 函数。改变这个：

this.setState= {
  appointments: newAppointmentList,
  function() {
    console.log(this.state.appointments);
  }
};

对此：

this.setState({
  appointments: newAppointmentList,
  function() {
    console.log(this.state.appointments);
  }
});

React 状态未在应用程序中更新，但我可以 console.log 更正更新后的状态

React state not updating in app but I can console.log correct updated state

javascript

state

reactjs