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

我认为问题可能在于您getInitialState仅使用Row。您正在使用传入的道具设置状态。如果孩子们获得新道具，getInitialState将不再被召唤。我总是回顾https://facebook.github.io/react/docs/component-specs.html以查看所有生命周期事件。尝试再次使用componentWillReceiveProps(object nextProps)设置状态。如果您在孩子中实际上不需要state，请删除州的使用并使用props，它可能会有效。

Answer 2

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

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

2 个答案: