Question

我有三个组件“MyApp”，“Candidate”和“Courses”，数据从MyApp传递到课程。数据是这样的

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

当您使用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/

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

Answer 2

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

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

2 个答案: