Reactjs 用redux对运动作出反应

我正在尝试使用

React motion

在我的React+Redux应用程序中添加新注释的动画

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

类注释扩展组件{
getDefaultStyles（）{
const{comments}=this.props；
返回注释.map（（c，i）=>{
返回{
关键字：“+i”，
样式：{top:-50，不透明度：0.2}，
数据：c
}
});
}
getStyles（）{
const{comments}=this.props；
返回注释.map（（c，i）=>{
返回{
关键字：“+i”，
风格：{
顶部：弹簧（0，预设。柔和），
不透明度：弹簧（1，预设。柔和）
},
数据：c
}
})
}
willEnter（）{
返回{top:-50，不透明度：0.2}
}
render（）{
让{comments}=this.props；
返回(
{style=>
{
style.map（（c）=>{
返回(
)
})
}
}
)
}
}

然后将样式传递给

Comment

组件中的第一个div

---

加载注释时，动画正常。但是用户添加一条注释，然后调用

fetchComments

方法来获取所有注释，动画不会出现。这和redux有关吗？我正在使用

mapstatetops

和

connect

传递我的评论。问题出在钥匙上。动画正在发生，但在注释的底部，通过注释的映射根据数组中的索引为注释指定了一个关键点。当我将键更改为包含

comment.id

number时，它开始正常工作