reduxとのリアクション

Question

React + Reduxアプリで新しいコメントを追加するには、react-motionでアニメーション化しようとしています。

class Comments extends Component { 
    getDefaultStyles() { 
     const { comments } = this.props; 
     return comments.map((c, i) => { 
      return { 
       key: "" + i, 
       style: { top: -50, opacity: 0.2 }, 
       data: c 
      } 
     }); 
    } 
    getStyles() { 
     const { comments } = this.props; 
     return comments.map((c, i) => { 
      return { 
       key: "" + i, 
       style: { 
        top: spring(0, presets.gentle), 
      opacity: spring(1, presets.gentle) 
       }, 
       data: c 
      } 
     }) 
    } 
    willEnter() { 
     return { top: -50, opacity: 0.2 } 
    } 
    render() { 
     let { comments } = this.props; 
     return (
      <div> 
       <TransitionMotion defaultStyles={this.getDefaultStyles()} styles={this.getStyles()} willEnter={this.willEnter}> 
       {styles => 
        <div> 
        { 
         styles.map((c) => { 
          return (
           <Comment key={c.key} comment={c.data} style={{...c.style, overflow: 'hidden'}} /> 
          ) 
         }) 
        } 
        </div> 
       } 
       </TransitionMotion> 
      </div> 
     ) 
    } 
} 

次に、スタイルはCommentコンポーネントの最初のdivに渡されます。

コメントを読み込んでいる間、アニメーションはOKです。しかし、ユーザーがコメントを追加した後、fetchCommentsメソッドが呼び出されてすべてのコメントが取得されると、アニメーションは発生しません。これは還元と関係がありますか？私はmapStateToPropsとconnectを使ってコメントを渡しています。

Answer 1

キーに問題がありました。アニメーションは発生していましたが、コメントの一番下には、配列のインデックスに基づくキーが割り当てられていました。私がcomment.id番号を含むようにキーを変更したとき、正しく動作し始めました！