ReactJS：操作狀態不會正確渲染子組件

我有三個組件「MyApp」，「Candidate」和「Courses」，數據從MyApp傳遞到課程。的數據是這樣ReactJS：操作狀態不會正確渲染子組件

var data = [{ 
    name : "azhar", 
    courses : ["Compilers", "Algorithms", "Data Structures"] 
}, { 
    name : "Jenny", 
    courses : ["Design", "UX"] 
}];

而且ReactComponents呈現爲這樣如下：

<MyApp> 
    <Candidate> 
    <Courses> 
    <Courses> 
     <Courses> 
    </Candidate> 
</MyApp>

問題：有一個按鈕添加新的候選人，當點擊我補充新的候選的狀態MyApp的。點擊時，我看到子組件不會呈現正確的數據。

新增的jsfiddle：https://jsfiddle.net/69z2wepo/8587/

真的希望有人給出了很好的解釋，因爲這是一個簡單的用例。

感謝

來源

2015-05-20 Mark Benny

當你創建一個JSX元素的數組就像您使用this.state.data.map()一樣，您應該始終包含一個key屬性，該屬性對於陣列中的該位置是唯一的。請注意，它不應該像數組中的索引或候選人的名稱那樣改變（因爲可能有重複）。

如果你對你的候選對象添加id財產，並創建一個新的ID，當你添加一個候選人，它應該工作：https://jsfiddle.net/qzy3sr6w/2/

這裏有一個很好的解釋：http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/

的TL;博士那篇文章是因爲它適用於push而不適用於unshift是因爲如果你沒有指定key，React將使用數組的索引作爲鍵（不完全正確，但足夠接近）。並且，由於您將數組添加到開頭，它將使用之前用於其他組件的索引0，這意味着新的第一個元素將獲得第二個元素課程。

來源

2015-05-20 11:01:44

我剛剛失去了一個小時的調試瘋狂，我錯過了失蹤的'鑰匙'。 – SM79

這就是交配。謝謝。 –

我不認爲這是一個好主意，react.state直接使用，因爲你是在這裏做什麼：

this.state.data.unshift({ 
      name : "Alice", 
      courses : [] // No courses for her. 
});

更好地利用這樣的額外變量：

var candidates = this.state.data; 

    candidates.push({ 
     name : "Alice", 
     courses : [] // No courses for her. 
    }); 

    this.setState({ 
     data : candidates 
    });

這裏是一個JSFidle：https://jsfiddle.net/69z2wepo/8597/

來源

2015-05-20 10:10:28 SM79

謝謝，這很酷。但是你正在將對象推向數據數組。如果你不改變（），它仍然沒有工作。 –

嗯，你是對的。讓我看看。 – SM79

ReactJS：操作狀態不會正確渲染子組件

回答

相關問題