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