Question

我希望有人可以对这个问题有所了解。经过多次尝试，我能够正确地将ReactCSSTransitionGroup导入我的反应应用程序。现在我收到以下警告，我的转换无效。

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;丙

我使用ReactCSSTransitionGroup元素将我的组件包装在主App.js文件中。

return (
  <div className="container">
    <Navigation />
        <div className="app-items-container">
            {
            this.state.notes.map((note) => {
                return(
                    <ReactCSSTransitionGroup {...transitionOptions}>
                        <Note noteContent={note.noteContent} 
                        noteId={note.id} 
                        key={note.id} 
                        removeNote={this.removeNote} />
                    </ReactCSSTransitionGroup>
                    )
                })
            }
        </div>
    <Form addNote={this.addNote} />
  </div>
);

我的组件已经传递了一个密钥。我应该在哪里申请钥匙？提前致谢。

Answer 1

我认为您不希望在.map函数中使用ReactCSSTransitionGroup。它应该在外面，ReactCSSTransitionGroup将为它的每个子节点（你的Note组件）添加它的魔力。

它的工作原理是在添加/删除DOM的子节点时为其中的每个子节点添加额外的生命周期方法。因此，不需要使用ReactCSSTransitionGroup包装每个Note组件，它应该只是将所有Notes作为它的子项。

关键警告是因为ReactCSSTransitionGroup将在一个范围内包装它的子节点。在.map循环中，react会看到如下内容：

<span> <Note key={note.id} /> </span>
<span> <Note key={note.id} /> </span>
<span> <Note key={note.id} /> </span>

React会希望每个跨区都有一个唯一的密钥，子Note键会被忽略。

将它移到地图之外会给你：

<span> 
    <Note key={note.id} />
    <Note key={note.id} />
    <Note key={note.id} />
</span>

当每个音符都有一把钥匙时，React会很高兴。

尝试以下方法：

return (
  <div className="container">
    <Navigation />
        <div className="app-items-container">
           <ReactCSSTransitionGroup {...transitionOptions}>
             {this.state.notes.map((note) => {
                return(
                        <Note noteContent={note.noteContent} 
                        noteId={note.id} 
                        key={note.id} 
                        removeNote={this.removeNote} />
                    )
                })
              }
            </ReactCSSTransitionGroup>
        </div>
    <Form addNote={this.addNote} />
  </div>
);

Answer 2

最有可能你应该在export class MissionService { // Observable string sources private missionAnnouncedSource = new BehaviorSubject("not started yet"); private missionConfirmedSource = new BehaviorSubject("not started yet"); // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable(); // Service message commands announceMission(mission: string) { this.missionAnnouncedSource.next(mission); } confirmMission(astronaut: string) { this.missionConfirmedSource.next(astronaut); } }上添加一个唯一的密钥，你能尝试以下方法吗？

<ReactCSSTransitionGroup >

另外，micposso说的是有意义的，所以如果你能确保node.id确实总是唯一的话会很好。

ReactCSSTransitionGroup唯一键错误

2 个答案: