2015-04-05 120 views
4

剛剛開始使用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/

+0

你可以把它放在一個jsfiddle或等價物中,因爲它不清楚你所擁有的實際結構是什麼或者這些部分是如何相互作用的,因爲你只包含了幾段代碼。 – WiredPrairie 2015-04-05 18:15:42

+0

自從我發佈以來,我做了一些更改,但同樣的問題仍然存在:https://jsfiddle.net/zfenub6f/1/ – Joel 2015-04-05 20:31:18

+0

可以將它最小化爲僅僅是特定問題,並使其實際上起作用嗎?這裏有很多代碼,它不適用於jsfiddle。您可能需要爲每一行添加一個「密鑰」。 http://facebook.github.io/react/docs/multiple-components.html#dynamic-children – WiredPrairie 2015-04-05 20:58:43

回答

1

如果你的孩子正在使用狀態和狀態不更新,什麼道具?它渲染得很好嗎?如果父級更改了子級的狀態,並且子級未反映該更改,那麼這些子級組件很可能需要分配給它們的唯一密鑰,這告訴React在父級更新狀態時需要更新這些項目。我遇到了類似的問題,兒童內部的道具更新以反映父母,但兒童的狀態不會更新。一旦我添加了密鑰,解決方案就解決了。爲了進一步閱讀這個博客,最初向我暗示了這個問題。

http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/

還有從作出反應,說明這種情況的官方文檔。

http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

+0

我剛剛更改,以便只有父母使用狀態。父母然後使用'行'的狀態版本傳遞給它的子節點。然後,孩子們不會將這個價值存儲在他們自己的狀態中,他們只會使用道具呈現。 現在問題轉移了。現在孩子重新渲染,但它重新呈現,彷彿道具是空的。所有呈現的值都是空的。 編輯:經過一些額外的調整後,它現在的作品。我想在將來使用狀態時我應該更加小心。謝謝你的提示! – Joel 2015-04-05 22:15:12

1

我想問題可能是你只使用getInitialState爲。你正在用傳入的道具設置狀態。如果孩子得到新的道具,getInitialState將不會再被調用。我總是參考https://facebook.github.io/react/docs/component-specs.html查看所有生命週期事件。嘗試使用componentWillReceiveProps(object nextProps)再次設置狀態。如果您實際上並不需要state,請刪除使用狀態並僅使用props,這可能會起作用。

相關問題