setState在修改数据时不触发重新渲染

Question

刚刚开始使用React,直到这一点它已经相对平稳.

我有一个包含X个预定义项的列表,这意味着列表总是以给定的行数呈现.

在列表呈现之前,此数据是从REST API收集的.数据包含与列表相关的变量,以及包含列表中每个项目的数组.

我选择了简单路由,因此我使用名为"data"的单个JSON对象填充每个组件,其中包含所有必需的内容.

呈现列表看起来像这样:

<MyList data={data} />

然后,在MyList的getInitialState中:

dataInt: this.props.data.dataInt || 0,
dataStr: this.props.data.dataStr || '',
rows: this.props.data.rows || []

所以我将我的项目数组(JSON)存储在列表的初始状态(父级)中,当我选择呈现列表时,我首先在数组中创建所有组件(子项),如下所示:

var toRender = [];
for(i = 0; i < this.state.rows.length; i++) {
    toRender.push(<ItemRow data={this.state.rows[i]} />);
}

然后我像这样渲染:

return (
    <div className="item-container">
        <table className="item-table">
            {toRender}
        </table>
    </div>
);

MyItem的渲染函数看起来像这样:

return (
    <tr>
        <td>{this.state.dataFromItem}</td>
    </tr>
);

现在,假设我想从父内部修改子数据,并从API中获取一些新数据.相同的结构,只是一个字段/列的值已更改:

i = indexOfItemToBeUpdated;
var newRows = this.state.rows;
newRows[i] = data; // New JSON object with same keys, different values.
this.setState({ rows: newRows }); // Doesn't trigger re-render
this.forceUpdate(); // Doesn't trigger re-render

我究竟做错了什么？

起初我以为是因为我将myItem的渲染函数包装在a中,但由于它在初始渲染时呈现完全正常,我将假设这是一个可接受的包装器.

经过一些测试后,似乎是父视图被重新渲染,而不是子视图(它们基于父视图中更新的数据).

JSfiddle:https://jsfiddle.net/zfenub6f/1/

Answer 1

如果您的孩子正在使用 State 并且 state 没有更新，那么 props 又如何呢？渲染效果好吗？如果父组件更改了子组件的状态，而子组件没有反映该更改，那么这些子组件很可能需要为它们分配一个唯一的键，该键告诉 React 当父组件上的状态更新时，这些项目需要更新。我遇到了类似的问题，子级内部的道具更新以反映父级，但子级的状态不会更新。一旦我添加了密钥，解决方案就解决了。要进一步阅读此内容，请查看最初向我暗示该问题的博客。

http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/

React 的官方文档也解释了这种情况。

http://facebook.github.io/react/docs/multiple-components.html#dynamic-children