在React中设置状态值的差异

Question

我开始使用React JS并进行这个小练习https://facebook.github.io/react/docs/more-about-refs.html。

这很简单，但在设置状态值时我遇到了很大的差异。当我设置状态时，我通过执行以下操作在控制台中查看它：console.log("s: "+this.state.userInput);。我还在{this.state.userInput}的视图中显示它。相当简单。但不是真的。事件和状态值似乎总是在控制台中分开，但它在视图中完美显示。怎么可能呢？！

我想在状态发生变化时查询我的服务器，但状态始终是一个字母。这太奇怪了。有人可以向我解释这是什么？我怎么能避免呢？

这是代码。

var SearchContainer = React.createClass({
getInitialState: function() {
  return {userInput: ''};
},

handleChange: function(e) {
    console.log("e: "+e.target.value);
    this.setState({userInput: e.target.value});
    console.log("s: "+this.state.userInput);
},

clearAndFocusInput: function() {
  this.setState({userInput: ''}); // Clear the input
  // We wish to focus the <input /> now!
},

render: function() {
  return (
    <div>
      <div onClick={this.clearAndFocusInput}>
        {this.state.userInput}
      </div>
      <input
        value={this.state.userInput}
        onChange={this.handleChange}
      />
    </div>
  );
}
});

这是奇怪的输出，

控制台：

查看：（HTML页面）

Answer 1

这是因为州还没有更新。即使您已使用this.setState明确设置它，但在方法执行完毕之前，它不会被设置。

如果您需要新值，则可以始终使用e.target.value。

Answer 2

默认情况下，React组件在状态更改时重新呈现。

因此，为了准确读取给定点的状态，将控制台语句放在render函数中，如下所示：

var SearchContainer = React.createClass({
  getInitialState: function () {
    return {
      userInput: ''
    };
  },

  handleChange: function(event) {
    var value = event.target.value;
    console.log('Value is ' + value);

    this.setState({
      userInput: value
    });
  },

  clearAndFocusInput: function() {
    this.setState({
      userInput: ''
    });
  },

  render: function() {
    var userInput = this.state.userInput;
    console.log('State is ' + userInput);

    return (
      <div>
        <div onClick={this.clearAndFocusInput}>
          {userInput}
        </div>
        <input
          value={userInput}
          onChange={this.handleChange}
        />
      </div>
    );
  }
});