Reagieren: Verzögerung bei der Aktualisierung der staatlichen

Betrachten Sie den folgenden code. Ich will, dass die letzten Zeichen der text im textfield-Objekt gespeichert werden, die in einem Staat namens lastChar. Um dies zu tun, habe ich den folgenden code?

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;
});

zum Beispiel, wenn der Benutzer geben Sie hello ich erwarten, um zu sehen, das Letzte Zeichen in beiden e.target.value.slice(-1) und this.state.lastChar das gleiche wie o

mittlerweile lastChar zeigt l

In anderen word-lastChar ist immer ein char vor dem genauen Wert?

warum ist es passiert? und wie kann ich es beheben?

InformationsquelleAutor Jeff | 2016-04-06
  1. 10

    Erhalten Sie nicht den aktualisierten Wert der Zustand, unmittelbar nach dem Aufruf von " setState(). Dies ist, weil, sobald setState() heißt view neu gerendert wird. So ist es besser, zu prüfen, wird der aktualisierte Wert im inneren machen. 

     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>
      );
    }

    Oder,

    this.setState({
    lastChar: e.target.value.slice(-1)}, ()=> { 
    console.log(this.state.lastChar)
});
    • wahr. Sie könnten auch Zugriff auf den geänderten Wert in der callback-Funktion setState wie this.setState({lastChar: e.target.value.slice(-1)}, function() { console.log(this.state.lastChar)}.bind(this));
    • Danke für den Hinweis. Ich update das hier.
    InformationsquelleAutor Ved
Schreibe einen Kommentar