reactjs - react :延迟更新状态

考虑下面的代码。我想将文本字段中的最后一个字符保存在称为lastChar的状态中。为此，我做了以下代码？

define(["react","react-keydown"], (React,keydown) => {

  var TypingContainer = React.createClass({
    getInitialState: function() {
      return {text: '',lastChar:''};
    },
    handleChange: function(e) {


          console.log('lastChar typed is:'+ e.target.value.slice(-1));

          this.setState({lastChar: e.target.value.slice(-1)});

          console.log('lastChar in state is:'+ this.state.lastChar);


    }

      ,
    render: function() {
      return(
         <div>
           {this.props.candidateWord}
           {this.props.message}
            <input
              className="typing-container"
              value={this.state.message}
              onChange={this.handleChange}



            />

         </div>
      );
    }
  })
  return TypingContainer;
});

例如，如果用户键入hello，我希望看到e.target.value.slice(-1)和this.state.lastChar中的最后一个字符与o相同

同时lastChar显示l
换句话说，lastChar始终是确切值之前的一个char？

为什么会发生？我该如何解决？

最佳答案

仅在调用setState()之后，您将不会获得状态的更新值。这是因为一旦调用setState()，就会重新渲染 View 。因此最好检查render中的更新值。

 render: function() {
    console.log('lastChar in state is:'+ this.state.lastChar);
      return(
         <div>
           {this.props.candidateWord}
           {this.props.message}
            <input
              className="typing-container"
              value={this.state.message}
              onChange={this.handleChange}
            />

         </div>
      );
    }

要么，

this.setState({
    lastChar: e.target.value.slice(-1)}, ()=> {
    console.log(this.state.lastChar)
});

关于reactjs - react :延迟更新状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36446355/