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

我认为问题可能是您只为Row使用getInitialState 。 您正在使用传入的道具设置状态。 如果孩子们获得新的道具，则不会再次调用getInitialState 。 我总是回到https://facebook.github.io/react/docs/component-specs.html来查看所有生命周期事件。 尝试使用componentWillReceiveProps(object nextProps)再次设置状态。 如果你实际上并不需要state的孩子，取出使用状态的，只是使用props ，它可能会工作。

Answer 2

如果你的孩子正在使用状态和状态不更新，那么道具呢？ 这样做会好吗？ 如果父级更改子级的状态，并且子级未反映该更改，则这些子组件很可能需要为其分配唯一键，这告知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