javascript - 当 prop 对象修改时，connect 不会改变子组件的 props

Question

您好，我有一个组件示例，其中包含像 connect 这样的组件

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

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

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

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

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

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

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

然后我的包装组件永远不会获得更新的 Prop 。只有 Connect 组件获取更新的 props。

然后我通过将数据传播到新对象并传递给子组件来修改代码。然后就可以完美运行了。

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

或者

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

这与您执行操作时发生的情况基本相同

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

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