我的应用程序中有一个奇怪的错误,我没有在React中遇到过。
基本上,当页面刷新时,我从URL中获取某些参数,对查询进行API请求,然后用结果填充我的Redux状态。
例如:
async componentDidMount() {
const {
values1, values2, match,
} = this.props;
await getSingleData(match.params.id);
await getData(values1, values2);
}
因此,我从URL参数中获取ID,然后发出API请求以获取数据并将其存储在Redux中。但是,当我使用解构语法时,会得到空或空值。使用解构语法时,似乎它在数据混合之前引用了空的Redux存储,而完整引用在数据混合之后给出了正确的值。
当我使用完整的this.props.values1
和this.props.values2
引用时,它工作正常。
例如,这段代码,一切工作都像应该的那样:
async componentDidMount() {
const {
values1, values2, match,
} = this.props;
await getSingleData(match.params.id);
await getData(this.props.values1, this.props.values2);
}
我很困惑为什么会这样。据我了解,解构对象将与未解构的对象具有相同的引用。但这显然不是事实。有输入吗?
答案 0 :(得分:1)
调用该函数时会立即进行结构分解,那时this.props为null。
在对await getSingleData(match.params.id)
的调用(销毁后运行)之后,this.props
被填充。
因此,您可以访问this.props.value1
。
解构无法跟踪或观察原始对象的变化。