[英]this.state not the same as state in this object
我遇到了一个问题,我通过在componentDidMount
执行AJAX调用来加载初始数据,并在所述AJAX调用的回调中设置状态。 我也想立即操作我的数据,所以我在setState
回调中调用另一个函数。 以下是我的代码片段:
filterData(area) {
console.log(this);
console.log(this.state);
console.log(this.state.data);
... // The implementation of my filter
}
componentDidMount() {
let xhr = new XMLHttpRequest();
xhr.onloadend = () => {
console.log('* AJAX POST Response Received *');
if (xhr.status >= 200 && xhr.status < 400) {
this.setState({ data: JSON.parse(xhr.response) },
this.filterData(this.area)
);
} else {
console.error('[ERROR] Server returned invalid response');
}
};
}
当我在this
对象中查看状态时,我可以找到我期望的正确状态数据但是this.state
和this.state.data
是我的构造函数中设置的初始值。 任何投入将不胜感激。
所以我想我在代码片段中遗漏了一些内容。 我的过滤函数实际上调用this.setState
来将过滤后的数据存储在状态中。 我认为这实际上是造成我问题的原因。
修改后的片段:
filterData(area) {
console.log(this);
console.log(this.state);
console.log(this.state.data);
... // The implementation of my filter
this.setState({ filtered_data: filtered });
}
我目前的解决方案
filterData(area, all_data) {
if(this.state.data || all_data) {
... // The implementation of my filter
}
this.setState({ filtered_data: filtered });
}
componentDidMount() {
let xhr = new XMLHttpRequest();
xhr.onloadend = () => {
console.log('* AJAX POST Response Received *');
if (xhr.status >= 200 && xhr.status < 400) {
this.filterData(this.area, JSON.parse(xhr.response));
} else {
console.error('[ERROR] Server returned invalid response');
}
};
}
setState
的第二个参数必须是一个函数。 试试这个:
this.setState({
data: JSON.parse(xhr.response)
}, () => this.filterData(this.area));
setState使得有能力重新渲染,就反应而言,在你无关之后做任何你做的事情。 您需要稍后进入组件生命周期,例如componentWillUpdate或componentDidUpdate来运行您的过滤器功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.