页面刷新时React组件componentDidMount中解构props获未hydrated值问题

这是个很典型的异步场景下的变量快照问题，我来帮你理清楚背后的逻辑：

核心原因：解构是一次性快照，而this.props始终指向最新的props引用 #

当你在componentDidMount开头写：

const { values1, values2, match } = this.props;

这行代码是同步执行的——它会把当前this.props对象里的values1、values2的值，直接复制到对应的变量中。这些变量从此就和this.props解绑了，哪怕后续this.props因为Redux store更新而变成新的对象，这些解构出来的变量也不会自动更新，它们存的只是组件挂载初期（hydration前）的空值快照。

而直接使用this.props.values1时，每次访问都是从当前最新的this.props对象里读取属性。在你的代码流程里：

1. 组件挂载，componentDidMount启动，此时this.props是hydration前的空值，解构出的values1/values2为空。
2. 执行await getSingleData(match.params.id)，这个异步操作更新了Redux store，React会给组件传递新的props对象（因为组件和Redux连接，props会随store更新）。
3. 此时this.props已经是包含正确values1/values2的新对象，但之前解构的变量还是初始的空值。
4. 所以用解构的变量调用getData会失败，而直接访问this.props.values1则能拿到最新的正确值。

举个简单的类比（非React场景） #

let props = { values1: null };
const { values1 } = props; // 快照：values1 = null
props = { values1: "最新数据" }; // props变成新对象
console.log(values1); // 输出null，还是初始快照
console.log(props.values1); // 输出"最新数据"，读取最新对象的属性

总结 #

在类组件的异步生命周期方法中，如果你的操作会导致props更新，那么：

• 解构props只能拿到当前时刻的属性值，后续props更新不会同步到解构变量。
• 直接访问this.props.xxx则会始终拿到最新的props属性值，因为this.props会被React更新为最新的对象引用。

内容的提问来源于stack exchange，提问作者Mabeh Al-Zuq Yadeek