reactjs - 使用 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。

加载评论时动画正常。但是用户添加评论，然后fetchComments调用该方法来获取所有评论，动画不会发生。这与redux有关吗？我正在使用mapStateToPropsand传递我的评论connect。

Answer 1

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