ReactJS this.setState() 与 this.state.myvar 不同步

IT技术 reactjs
2021-04-13 02:40:05

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

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 !
    );
  }
});
1个回答

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

updatePartyCategory: function(value) {
    this.setState({b_MyPartyCat: value}, function(){
        console.log(this.state.value === value); // true
    }.bind(this));
},
明白了,谢谢,这就是我所怀疑的,但没有考虑回调,我仍然戴着我的 C++ 帽子。我会value在不需要回调的情况下保持简单,但最好知道,以防万一!-) facebook.github.io/react/docs/component-api.html
2021-05-24 02:40:05
@GiantElk:在典型的 JavaScript 中,您会使用React 的自动绑定:-)
2021-05-28 02:40:05
是的,回调是有意使用组件作为上下文调用的。
2021-05-29 02:40:05
好吧,如果删除 .bind 仍然有效,那么它必须在该上下文中调用它。在观察通过 7 个函数和 3 个文件的组件和状态更改对象后,我跟踪了源代码:-)
2021-06-08 02:40:05
这也是绝对需要的.bind(this),没有 .bind 会发生什么?当我尝试使用或不使用 .bind 时,我无法分辨出区别。
2021-06-18 02:40:05