ReactJs setState 更新与输入框中输入的内容不同步

Posted

技术标签:

【中文标题】ReactJs setState 更新与输入框中输入的内容不同步【英文标题】:ReactJs setState updating not in sync with what is being typed in the input box 【发布时间】:2015-07-22 17:38:58 【问题描述】:

问题:

这很奇怪。我在子组件的输入框中键入,当我键入“onChange”方法时,应该将更新发送到父组件。我输入的第一件事未能更新,但随后我输入的任何其他内容都会更新,但与当前输入不同步。

我是 Reactjs 的菜鸟,也不是 javascript 的高手,所以我不知道发生了什么。

例子:

这是我的对象的控制台输出,用于更新状态和“setState”之后的新状态

第一次尝试更新value1

Object value1: "5"

Object value1: "0", value2: "0", value3: "0", opening: "0"

第二次尝试更新value1

Object value1: "55"
Object value1: "5", value2: "0", value3: "0", opening: "0"

正如您第一次看到的那样,没有任何更新。然后第二次部分更新了。

代码:

var Calculator = 
    React.createClass(
      getInitialState:function()
        return 
            inputValues:
              value1: "0",
              value2: "0",
              value3: "0",
              opening: "0"
            ,
            outputValues:
              buyRate: "0",
              sellRate: "0",
              buyStopLoss: "0",
              buyTopProfit: "0",
              sellStopLoss: "0",
              sellTopProfit: "0"  
            

        
    ,
    //Not worrying about updating here yet. It' the child component below that is being funky.
    update: function(update)
      console.log("Calculator update was called");
        this.setState(
          update           
        );
     ,
      render: function () 
        return (
          <div>
            <div className="grid">
              <div className="col fluid">
                <h2>Input</h2>
                <Input values=this.state.inputValues onClick=this.handleClick update=this.update value1=this.state.value1 value2=this.state.value2 value3=this.state.value3 opening=this.state.opening/>
              </div>
              <div className="col fluid">
                <h2>Output</h2>
                <Output />
              </div>
            </div>
          </div>
        );

);


var Input = 
React.createClass(
   getInitialState:function()
      return
        value1 : this.props.values.value1,
        value2 : this.props.values.value2,
        value3 : this.props.values.value3,
        opening : this.props.values.opening
      
   ,
   //Here is the update that is not updating the first time around. 
   update: function(key,value)
      //console.log("Input Update was Called");
      var newState = ;
      newState[key]= value;
      this.setState(newState);
      //console.log(newState);
      //console.log(this.state);
    ,
    render:function()
        return (
                <div>
                <p><InputComponent update=this.update name="value1" value=this.props.values.value1 /> / <InputComponent update=this.update name="value2" value=this.props.values.value2/> / <InputComponent update=this.update name="value3" value=this.props.values.value3/></p>
                <p><InputComponent update=this.update name="value3" value= this.props.values.opening /></p>
                </div>
            )
    
);

var InputComponent = 
React.createClass(
    handleChange: function()
      //console.log("handleChange was called");
      var newValue = React.findDOMNode(this.refs.text).value.trim();
      //console.log(this.props.name);
      //console.log("newValue =");
      //console.log(newValue);
      this.props.update(this.props.name,newValue);
    ,
    render: function() 
        return <input type="text" ref="text" placeholder="Enter Value" onChange=this.handleChange />;
    
);

【问题讨论】:

【参考方案1】:

我发现了问题所在。您必须注意setState() 是一个异步调用。我的打印输出在函数返回之前被调用,这就是为什么输出似乎错过了一个字符。如果您想检查您的状态是否正在正确更新,请使用为方法 setState(function|object nextState[, function callback]) 提供的回调。

例如:

update: function(key,value)
              console.log("Input Update was Called");
              var newState = ;
              newState[key]= value;
              console.log("New state and old state BEFORE update");
              console.log(newState);
              console.log(this.state);
              this.setState(newState,this.printState);

            ,
            printState: function()
            
              console.log("New state AFTER update");
              console.log(this.state);

            , 

【讨论】:

以上是关于ReactJs setState 更新与输入框中输入的内容不同步的主要内容,如果未能解决你的问题,请参考以下文章

vue实现输入框中输完后光标自动跳到下一个输入框中

ReactJS:警告:setState(...):在现有状态转换期间无法更新

ReactJS:setState值不更新[重复]

ReactJS 状态未更新在 setState 回调中

调用 setState 后 ReactJS 元素未更新

React JS:调用 setState 后组件未更新