[英]React - State not updated
Here I try to set state.autocomplete
to 'hello' and then print it, but state seems to be null. 在这里,我尝试将state.autocomplete
设置为“ hello”,然后进行打印,但是state似乎为null。 How can that be when I just updated the state using setState
? 当我刚刚使用setState
更新状态时怎么办? data
is set as a global variable. data
设置为全局变量。
var data = {
populate_at: ['web_start', 'web_end'],
autocomplete_from: ['customer_name', 'customer_address']
};
var AutocompleteFromCheckboxes = React.createClass({
handleChange: function(e) {
this.setState( { autocomplete_from: 'event.target.value' } );
console.log('autocompleteFrom state: ', this.state.autocomplete_from);
// ^ => Uncaught TypeError: Cannot read property 'autocomplete_from' of null
return 1;
},
render: function() {
var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
return (
<label for={value}>
<input type="checkbox" name={value} value="{value}"
onChange={this.handleChange.bind(this)}
ref="autocomplete-from"/>
{value}
</label>
);
}, this);
return (
<div className="autocomplete-from">
{autocompleteFrom}
</div>
);
}
});
var DynamicForm = React.createClass({
getInitialState: function() {
return {
name : null,
populate_at : null,
same_as : null,
autocomplete_from : "not set",
title : null
};
},
saveAndContinue: function(e) {
e.preventDefault();
var data = {
name : this.refs.name.getDOMNode().value,
};
console.log('data: ' + data.name);
},
render: function() {
return (
<AutocompleteFromCheckboxes
autocomplete_from={this.props.data.autocomplete_from} />
);
}
});
var mountpoint = document.getElementById('dynamic-form');
if ( mountpoint ) {
React.render(<DynamicForm data={data} />, mountpoint);
}
});
From the reactjs docs: 从reactjs文档中:
setState()
does not immediately mutatethis.state
but creates a pending state transition.setState()
不会立即使this.state
突变,而是创建一个挂起的状态转换。 Accessingthis.state
after calling this method can potentially return the existing value. 调用此方法后访问this.state
可能会返回现有值。
https://facebook.github.io/react/docs/component-api.html https://facebook.github.io/react/docs/component-api.html
What you can do is pass a callback function to setState
which is triggered once the state has been updated: 您可以做的是将回调函数传递给setState
,一旦状态更新,该函数便会触发:
this.setState(
{autocomplete_from: ...},
function () {
... at this point the state of the component is set ...
}
)
You need to set the initial state of your component, try adding the following to the top of your component. 您需要设置组件的初始状态,尝试将以下内容添加到组件顶部。
getInitialState: function() {
return {
autocomplete_from: ''
};
}
EDIT: 编辑:
In your DynamicFrom component you have: 在您的DynamicFrom组件中,您可以:
render: function() {
return (
<AutocompleteFromCheckboxes
autocomplete_from={this.props.data.autocomplete_from} />
);
}
Since you are trying to reference the state you should write 由于您正在尝试引用状态,因此您应该编写
autocomplete_form={this.state.autocomplete_from}
Also you are trying to set the state from a child component and it should not directly modify state. 另外,您尝试从子组件设置状态,并且它不应直接修改状态。 The best way to approach this is to pass down a function from DynamicFrom(holds the state) to AutocompleteFromCheckboxes. 解决此问题的最佳方法是将一个函数从DynamicFrom(保持状态)传递到AutocompleteFromCheckboxes。 Like so. 像这样
var DynamicForm = React.createClass({
handleChange: function(value) {
this.setState({autocompelete_from: value});
},
render: function() {
return(
<AutocompleteFromCheckboxes
autocomplete_from={this.state.autocomplete_from}
handleChange={this.handleChange}
/>
);
},
....
});
AutocompleteFromCheckboxes = React.createClass({
....
onChange={this.handleChange}
....
handleChange: function(e) {
this.props.handleChange(e.target.value);
}
});
To see updated state value after doing setState you should do something like below 要在执行setState之后查看更新后的状态值,请执行以下操作
this.setState( { autocomplete_from: 'event.target.value' }, () => {
console.log(this.state.autocomplete_from);//this will print the updated state value
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.