剛剛開始使用React,並且直到此時它一直比較平滑。當數據被修改時,setState不會觸發重新渲染
我有一個列表,其中包含X個預定義的項目,這意味着該列表總是呈現給定數量的行。
在列表呈現之前,這些數據是從REST API收集的。數據包含與列表有關的變量,以及包含列表中每個項目的數組。
我選擇了簡單的路由,因此我使用一個名爲'data'的單個JSON對象填充每個組件,其中包含所有必需的東西。
渲染列表看起來是這樣的:在的初始狀態
dataInt: this.props.data.dataInt || 0,
dataStr: this.props.data.dataStr || '',
rows: this.props.data.rows || []
所以我存儲我的項目(JSON)陣列:
<MyList data={data} />
然後,在MYLIST的getInitialState列表(父),當我選擇呈現列表時,我首先創建一個數組中的所有組件(子項),如下所示:
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的功能,但由於它呈現初始完全正常渲染,我會認爲是可接受的包裝。
經過一些測試後,似乎重新呈現父視圖,但不是子視圖(基於父視圖中更新的數據)。
的jsfiddle:https://jsfiddle.net/zfenub6f/1/
你可以把它放在一個jsfiddle或等價物中,因爲它不清楚你所擁有的實際結構是什麼或者這些部分是如何相互作用的,因爲你只包含了幾段代碼。 – WiredPrairie 2015-04-05 18:15:42
自從我發佈以來,我做了一些更改,但同樣的問題仍然存在:https://jsfiddle.net/zfenub6f/1/ – Joel 2015-04-05 20:31:18
可以將它最小化爲僅僅是特定問題,並使其實際上起作用嗎?這裏有很多代碼,它不適用於jsfiddle。您可能需要爲每一行添加一個「密鑰」。 http://facebook.github.io/react/docs/multiple-components.html#dynamic-children – WiredPrairie 2015-04-05 20:58:43