[英]ReactJs setState updating not in sync with what is being typed in the input box
问题:
真奇怪。 我在子组件的输入框中键入内容,并且在键入时,“ 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} />;
}
});
我弄清楚了问题所在。 您必须注意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);
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.