react更新props后this.props === nextProps

kk的笨脑壳

于 2017-10-24 16:15:41 发布

阅读量6.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react nextProps

本文链接：https://blog.youkuaiyun.com/kkstrive/article/details/78330918

react 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了React中父组件ComparisonChart向子组件UniversalChart传递state>data作为props>data时，子组件shouldComponentUpdate中this.props与nextProps总是相等的问题。分析了原因，并给出了正确的setState实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. this.props always equals to nextProps

结构：父组件：ComparisonChart，子组件：UniversalChart

问题：父组件中state>data传到子组件作为props>data,但是在子组件的shouldComponentUpdate中，this.props和nextProps总是相等。

原因：

// 问题所在
const { data } = this.state
...
data.push(..)
this.setState({ data })
// 写改为
const data = [...this.state.data]

const { data } = this.state其实只是对state.data进行了浅拷贝，此时data指向了state.data的地址，所以data.push(..)已经导致state.data的值改变了，所以this.setState({ data })导致的子组件更新时，this.props和nextProps一样。

参考：