ReactJS this.setState() 与 this.state.myvar 不同步 [英] ReactJS this.setState() out of sync with this.state.myvar

问题描述

在组件中的这个 ReactJS 代码中，我希望 this.setState( {b_MyPartyCat: value} ) 更新 this.state.b_MyPartyCat 所以两个 console.log 语句在 updatePartyCategory() 中显示相同的值，但它们没有.

var MyIconButton = React.createClass({句柄提交:函数(e){e.preventDefault();var b_buttonOn = false;如果(this.props.pressed === true){b_buttonOn = 假；}别的 {b_buttonOn = 真；}this.props.updateFilter( b_buttonOn );},渲染:函数(){返回 (<div><form onSubmit={this.handleSubmit}><input type="image" src={this.props.pressed ?this.props.onpic : this.props.offpic }></input></表单>

);}});var MyPartyCatButton = React.createClass({渲染:函数(){返回 (<MyIconButton press={this.props.pressed} updateFilter={this.props.updateFilter} onpic="static/images/icon1.jpeg" offpic="static/images/off-icon.jpg"/>);}});////主应用视图var MyHomeView = React.createClass({getInitialState: 函数() {//这是我最终将从服务器获取数据的地方.返回 {b_MyPartyCat: 真};},updatePartyCategory: 函数(值){//最终将值写入服务器.this.setState( {b_MyPartyCat: value} );console.log("INSIDE: MyHomeView() updatePartyCategory() value = " + value );console.log("INSIDE: MyHomeView() updatePartyCategory() this.state.b_MyPartyCat = " + this.state.b_MyPartyCat );},渲染:函数(){返回 (<div><MyPartyCatButton press={this.state.b_MyPartyCat} updateFilter={this.updatePartyCategory}/>

//最终会有 3 个其他类别，即书籍、滑板、树木！);}});

解决方案

setState 实际上排队状态更新.如果你想在实际执行后做一些事情，你可以传递一个回调作为第二个参数.

updatePartyCategory: function(value) {this.setState({b_MyPartyCat: value}, function(){console.log(this.state.value === value);//真的}.bind(this));},

In this ReactJS code in component I would expect this.setState( {b_MyPartyCat: value} ) to update this.state.b_MyPartyCat so the two console.log statements in updatePartyCategory() show the same value, but they don't.

var MyIconButton = React.createClass({

  handleSubmit: function(e) {
    e.preventDefault();

    var b_buttonOn = false;
    if (this.props.pressed === true) {
      b_buttonOn = false;
    }
    else {
      b_buttonOn = true;
    }
    this.props.updateFilter( b_buttonOn ); 
  },

  render: function() {   
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="image" src={this.props.pressed ? this.props.onpic : this.props.offpic }></input>
        </form>
      </div>
    );
  }
});


var MyPartyCatButton = React.createClass({

  render: function() {
    return (
      <MyIconButton pressed={this.props.pressed} updateFilter={this.props.updateFilter} onpic="static/images/icon1.jpeg" offpic="static/images/off-icon.jpg"/>
    );
  }
});

//
// Main App view
var MyHomeView = React.createClass({
  getInitialState: function() {
    // This is where I'll eventually get data from the server.
    return {
      b_MyPartyCat: true
    };
  },

  updatePartyCategory: function(value) {
    // Eventually will write value to the server.
    this.setState( {b_MyPartyCat: value} );

    console.log("INSIDE: MyHomeView() updatePartyCategory() value = " + value );
    console.log("INSIDE: MyHomeView() updatePartyCategory() this.state.b_MyPartyCat = " + this.state.b_MyPartyCat );

  },

  render: function() {
    return (
        <div>
         <MyPartyCatButton pressed={this.state.b_MyPartyCat} updateFilter={this.updatePartyCategory}/>
        </div>

        // Eventually will have 3 other categories i.e. Books, Skateboards, Trees !
    );
  }
});

解决方案

setState actually queues a state update. If you want to do something after it's actually executed, you can pass a callback as the second argument.

updatePartyCategory: function(value) {
    this.setState({b_MyPartyCat: value}, function(){
        console.log(this.state.value === value); // true
    }.bind(this));
},

这篇关于ReactJS this.setState() 与 this.state.myvar 不同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！