React.js：为什么子组件改变父状态？

Question

为什么在此示例中子组件更改父组件状态？根据Facebook（react.js）文档，State类似于props，但它是私有的，完全由组件控制。

codepen example

malloc()

Answer 1

因为您使用this.props.data设置了状态。 this.props.data来自父母，因此当它发生变化时，状态也会发生变化。

解决方案很简单，只需使用扩展运算符而不是使用相同的引用，使用新值（从this.props.data复制）设置状态。

this.state = {data: ...this.props.data};