Question

假设我的JavaScript文件中有一些外部对象：

var data = [{id: 1, name:'Test1'}, {id:2, name: 'Test2'}];

我传递给ReactDOM：

ReactDOM.render(<Test data={data}/>, document.getElementById('container'));

并作为Test组件的状态对象的属性：

getInitialState: function () {
    return {localState: data};
},

在链条的某处，我使用了这个：

handleClick: function () {
        data[0].id=55;
        this.setState({localState: data});
}

导致重新渲染。完整代码：http://jsfiddle.net/44ff2j4b/

这是个好主意吗？基本上，具有将在组件中就地修改并适当地重新渲染的外部数据。这样做会有一些副作用吗？据我所知，修改React组件中的状态并不行，但这里的“状态”不属于某个组件......它属于域逻辑。

Answer 1

在React组件中，“state”应该被修改，组件的实际状态只能在其中进行修改。但是，你在这里做的是用一个道具播种状态然后在内部维护它。只要你不是每次都复制道具，只是播种它就可以了。做read more about this here。但是，您应该将道具从data重命名为initialData，以表明它只会用于播种该州。

Answer 2

虽然它可能有用，但通常不是一个好主意。

React喜欢将道具视为不可变的。因此，如果您将数据作为道具传递，则不应像在以下位置那样更改原始数据：

data[0].id=55;

如果要将数据传递给react组件，请将其复制为getInitialState()中的初始状态，并仅更改react组件内的副本。
注意：为此，您需要进行深层复制（因此不仅要复制对象数组，还要复制对象本身）。 ImmutableJS是一个经常与react结合使用的解决方案/库。

如果您还想更改原始数据，正确的方法是将函数作为prop（除了数据道具）传递给react组件。然后，您可以从react组件调用此函数，然后可以更改原始数据。原始数据更改或更新应使反应组件内的数据副本保持不变然后，代码（外部反应）可以决定是否使用新数据重新呈现整个反应组件（但标准做法是仅调用ReactDOM.render()一次）。

在React中使用外部对象作为状态属性

2 个答案: