在页面刷新时,解构道具会在componentDidMount中提供未水合的值

时间:2019-05-09 12:11:46

标签: javascript reactjs redux

我的应用程序中有一个奇怪的错误,我没有在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.values1this.props.values2引用时,它工作正常。

例如,这段代码,一切工作都像应该的那样:

 async componentDidMount() {
    const {
      values1, values2, match,
    } = this.props;

    await getSingleData(match.params.id);
    await getData(this.props.values1, this.props.values2);
  }

我很困惑为什么会这样。据我了解,解构对象将与未解构的对象具有相同的引用。但这显然不是事实。有输入吗?

1 个答案:

答案 0 :(得分:1)

调用该函数时会立即进行结构分解,那时this.props为null。

在对await getSingleData(match.params.id)的调用(销毁后运行)之后,this.props被填充。

因此,您可以访问this.props.value1

解构无法跟踪或观察原始对象的变化。