尝试将 ReactCSSTransitionGroup 导入 React 应用程序时收到有关 unique "key" 的警告

Question

我希望有人能阐明这个问题。经过多次尝试，我能够正确地将 ReactCSSTransitionGroup 导入到我的 React 应用程序中。现在我收到以下警告并且我的转换无效。

Warning: Each child in an array or iterator should have a unique "key" prop.

我用这样的 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

很可能您也应该在 <ReactCSSTransitionGroup > 上添加一个唯一键，您可以尝试以下方法吗？

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

此外，micposso 说的很有道理，所以如果您能确保 node.id 确实始终是唯一的，那就太好了。

Answer 2

我认为您不需要 .map 函数中的 ReactCSSTransitionGroup。它应该在外面，ReactCSSTransitionGroup 会为它的每个 children（你的 Note 组件）添加它的魔力。

它通过向 children 的 'each' 添加额外的生命周期方法来工作，因为它们是 DOM 的 added/removed。所以没有必要用 ReactCSSTransitionGroup 包装每个 Note 组件，它应该只包含所有的 Notes，因为它是 children.

关键警告是因为 ReactCSSTransitionGroup 会将其 children 包裹在一个跨度中。在 .map 循环中时，React 会看到如下内容：

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

React 会希望每个 span 都有一个唯一的键，child Note 键将被忽略。

将它移到地图外会给你这个：

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

React 会很高兴，因为每个 Note 都有一个键。

尝试以下操作：

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>
);

尝试将 ReactCSSTransitionGroup 导入 React 应用程序时收到有关 unique "key" 的警告

Getting warning about unique "key" when trying to import ReactCSSTransitionGroup into react app

reactjs

reactcsstransitiongroup

react-transition-group