ReactJS：操纵状态不能正确呈现子组件

Question

我有三个组件 "MyApp"、"Candidate" 和 "Courses"，数据从 MyApp 传递到 Courses。数据是这样的

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/

真的希望有人给出一个好的解释，因为这是一个简单的用例。

谢谢

Answer 1

我不认为直接使用 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
   });

这是一个 JSFiidle：https://jsfiddle.net/69z2wepo/8597/

Answer 2

当您像使用 this.state.data.map() 一样创建 JSX 元素数组时，您应该始终包含一个 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/

那个 post 的 TL;DR 是它对 push 但对 unshift 不起作用的原因是因为如果你不指定 key， React 将使用数组的索引作为键（不完全正确，但足够接近）。由于您要添加到数组的开头，它将使用之前用于另一个组件的索引 0，这意味着新的第一个元素将获得第二个元素课程。

ReactJS：操纵状态不能正确呈现子组件

ReactJS : Manipulating State doesn't render child components properly

reactjs