为什么componentDidUpdate中prevProps与当前props始终相等，该如何解决？

问题根源 #

你遇到的问题核心是父组件更新person状态时未变更对象引用：React 基于浅比较判断状态/属性是否更新，如果你直接修改原person对象的属性再赋值给state，对象的内存地址没有变化，就会导致两个问题：

• 父组件本身可能不会触发重渲染
• 即使重渲染，子组件拿到的prevProps.person和this.props.person是同一个引用对象，prevProps.person.id会和当前props.person.id同步修改，自然判断为相等

修复方案 #

方案1（最优：修改父组件更新逻辑） #

父组件更新person状态时，永远返回全新的对象，保证引用变更：

// 错误写法（直接修改原对象属性，引用不变）
this.state.person.id = 1
this.setState({ person: this.state.person })

// 正确写法1：用展开运算符生成新对象
this.setState(prevState => ({
  person: { ...prevState.person, id: 1 }
}))

// 正确写法2：用Object.assign生成新对象
this.setState(prevState => ({
  person: Object.assign({}, prevState.person, { id: 1 })
}))

修改后子组件的原有判断逻辑就可以正常生效。

方案2（备选：父组件逻辑不可改时使用） #

如果无法修改父组件的更新逻辑，可以通过给子组件绑定key属性实现需求：
父组件调用子组件时，将key设为person.id：

<ChildComponent 
  person={this.state.person}
  key={this.state.person?.id ?? 'empty'}
/>

当person.id变化时，key值变化会触发React直接销毁重建子组件，你可以把fetchData逻辑放到componentDidMount中即可，不需要再写componentDidUpdate的判断逻辑。

内容的提问来源于stack exchange，提问作者werwe werwer