React-motion with redux

Question

我正在尝试用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>
        )
    }
}

然后将样式传递给Comment组件中的第一个div。

加载注释时，动画正常。但是用户添加评论，然后调用fetchComments方法来获取所有评论，动画就不会发生。这和redux有什么关系吗？我正在使用mapStateToProps和connect传递我的评论。

Answer 1

问题出在钥匙上。动画正在发生，但在注释的底部，因为通过它们的映射根据数组中的索引为它们分配了一个键。当我更改密钥以包含comment.id编号时，它开始正常工作！