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

Question

我的应用程序中有一个奇怪的错误，我在 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 中。但是，当我使用 desctructured 语法时，我会得到空值或 null 值。使用解构语法时，它似乎在数据混合之前引用了空的 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);
  }

我很困惑为什么会这样。据我了解，解构对象将具有与非描述对象相同的引用。但显然情况并非如此。有什么意见吗？

Answer 1

在调用函数时立即发生解构，此时 this.props 为空。

调用await getSingleData(match.params.id)（在解构之后运行）this.props 被填充。

因此，您可以访问this.props.value1。

解构不会跟踪或观察原始对象的变化。