React Motion内插样式未更新

Question

我正在尝试使用React Motion的TransitionMotion（docs）为项目列表（来自Redux）执行装载/卸载动画：

// import statements

@withRouter
@connect(state => ({
    store: state.example
}))
export default class Example extends Component {

    getContent = interpolatedStyles => {
        // interpolatedStyles is stale
        return (
            <div>
                {
                    this.props.store.visibleItems
                        .map(({data}, index) => {
                            // interpolatedStyles[index] is undefined for indices > 0
                            return (
                                <Item data={data} key={interpolatedStyles[index].key} style={interpolatedStyles[index].style}/>
                            );
                        })
                }
            </div>
        );
    };

    getDefaultAnimationStyles() {
        return this.props.store.visibleItems.map(({name}) => ({
            key: name,
            style: {
                opacity: 0
            }
        }));
    }

    getAnimationStyles() {
        return this.props.store.visibleItems.map(({name}) => ({
            key: name,
            style: {
                opacity: spring(1, {stiffness: 66, damping: 21})
            }
        }));
    }

    willLeave = () => {
        return {
            opacity: spring(0, {stiffness: 66, damping: 21})
        };
    };

    render() {
        return (
            <div className={styles.root}>
                <TransitionMotion
                    willLeave={this.willLeave}
                    defaultStyles={this.getDefaultAnimationStyles()}
                    styles={this.getAnimationStyles()}>
                    {this.getContent}
                </TransitionMotion>
            </div>
        );
    }
}

问题是商店更新时interpolatedStyles数组不会更新。首先，this.props.store.visibleItems数组只有一个项目。这会逐渐增加到两个或更多，getDefaultAnimationStyles()和getAnimationStyles()会返回更新的样式，但interpolatedStyles不会更新以包含新项目。