当prop对象被修改时，connect不会更改子组件的props

Question

嗨，我有一个组件样本包裹着像

这样的连接

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

我从另一个组件导入Sample并将道具名称data作为

传递

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

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

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

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

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

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

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

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

第一种方法有什么问题？

Answer 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 };

OR

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

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

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

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