setState在修改數據時不觸發重新渲染

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

我認為問題可能是您只為Row使用getInitialState 。 您正在使用傳入的道具設置狀態。 如果孩子們獲得新的道具，則不會再次調用getInitialState 。 我總是回到https://facebook.github.io/react/docs/component-specs.html來查看所有生命周期事件。 嘗試使用componentWillReceiveProps(object nextProps)再次設置狀態。 如果你實際上並不需要state的孩子，取出使用狀態的，只是使用props ，它可能會工作。

Answer 2

如果你的孩子正在使用狀態和狀態不更新，那么道具呢？ 這樣做會好嗎？ 如果父級更改子級的狀態，並且子級未反映該更改，則這些子組件很可能需要為其分配唯一鍵，這告知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