connect 修改 prop 对象时不改变子组件的 props答案

【问题标题】：connect not change the props of child component when the prop object modifiedconnect 修改 prop 对象时不改变子组件的 props
【发布时间】：2018-06-01 10:40:14
【问题描述】：

嗨，我有一个组件 Sample 用 connect like 包裹

@connect(state => ({
    ....
    ....
}), {})
export default class Sample extends Component {
....
....
}

我从另一个组件导入 Sample 并将 prop 名称 data 传递为

....
data = {
a: 1,
b: 2
}

....
<Sample data={data} />

然后我的组件使用这些数据进行渲染。

然后我将新的键值添加到data as

data = {
    a: 1,
    b: 2,
    c:3
    }

然后我的包装组件永远不会得到更新的道具。只有Connect 组件才能获得更新的道具。

然后我通过将数据传播到新对象并传递给子组件来修改代码。那么它就完美地工作了。

<Sample data={{ ...data }} />

第一种方法有什么问题？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

问题与connect 无关。我相信这里的问题是您对对象 data 所做的突变。

在 JavaScript 中，我们知道这个简单的道理

y = { a: 1 }
x = y;
console.log(x === y); // true
x.b = 2;    
console.log(x === y); // true

为了触发重新渲染，React 希望您提供一个新对象，您可以通过以下方式之一来实现。

newData = { ...data, c: 3 };

或

newData = Object.assign({}, data, { c : 2 });

当你这样做时，这基本上是一样的

<Sample data={{ ...data }} />

它会在每次重新渲染时创建一个新对象（即使您不想要它，因此不建议这样做）。

【讨论】：