ReactCSSTransitionGroupのユニークキーエラー

Question

誰かがこの問題に少しでも光を当ててくれることを願っています。多くの試みの後、ReactCSSTransitionGroupを私の反応アプリに正しくインポートすることができました。今私は次の警告を受けて、私の移行は機能していません。

警告：配列またはイテレータの各子には、一意の「キー」小文字が必要です。

メインのApp.jsファイルに、このようなReactCSSTransitionGroup要素でコンポーネントをラップしました。

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を.map機能の中に入れたいとは思わない。それは外にある必要があり、ReactCSSTransitionGroupはそれをそれぞれの子（あなたのNoteコンポーネント）に追加します。

これは、DOMの追加/削除時に子どもの「それぞれ」にライフサイクルメソッドを追加することによって機能します。したがって、各NotesコンポーネントをReactCSSTransitionGroupでラップする必要はありません。すべてのNotesを子として持つだけです。

ReactCSSTransitionGroupがスパン内の子をラップするため、重要な警告があります。次のようなものが表示されます反応し、.MAPループにする場合：

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

が反応スパンのそれぞれが固有のキーを持っていることになるでしょう、子注キーは無視されます。マップ外に移動

はあなたにこれを与える：各ノートは鍵を持っているよう

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

して反応が幸せになります。

は、以下のことを試してみてください。

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

ほとんどの場合、<ReactCSSTransitionGroup >に固有のキーを追加する必要があります。次のように入力してください。あなたは確かに常にユニークnode.idであることを確認してくださいすることができれば、それはいいだろうので

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が言ったことは、理にかなっています。