6

刚开始使用 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/

4

2 回答 2

2

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

于 2015-04-22T04:49:25.980 回答
1

如果你的孩子正在使用状态并且状态没有更新，那么道具呢？这渲染得好吗？如果父级更改了子级的状态并且子级没有反映该更改，则这些子组件很可能需要分配给它们的唯一键，这会告诉 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

于 2015-04-05T21:59:24.687 回答