React-Motion — StaggeredMotion的疑问和问题

Question

我第一次使用react-motion，但在使其工作时遇到了一些麻烦。我正在尝试制作一个动画结果列表，一次介绍一个项目。我想使用data数组生成列表，但是由于某些原因，它不起作用。

我在做什么错？预先谢谢你。

伪代码

• 组件渲染
• 一次介绍一个孩子

结果部分

import * as React from 'react'
import { spring, StaggeredMotion } from 'react-motion'

const data = [
    {
        id: 1,
        label: 'A',
        h: 0,
    },
    {
        id: 2,
        label: 'B',
        h: 0,
    },
    {
        id: 3,
        label: 'C',
        h: 0,
    },
]

const Item = props => {
    return <li>{props.label}</li>
}

export class Results extends React.Component {
    render() {
        return (
            <StaggeredMotion
                defaultStyles={data}
                styles={prevInterpolatedStyles =>
                    prevInterpolatedStyles.map((_, i) => {
                        return i === 0 ? { h: spring(56) } : { h: spring(prevInterpolatedStyles[i - 1].h) }
                    })}
            >
                {interpolatingStyles => {
                    return (
                        <div>
                            {interpolatingStyles.map((style, i) => {
                                return data.map(data => {
                                    return <Item key={i} label={data.label} style={{ border: '1px solid', height: style.h }} /> // This does not work
                                })
                                // return <div key={i} style={{ border: '1px solid', height: style.h }} /> // This works
                            })}
                        </div>
                    )
                }}
            </StaggeredMotion>
        )
    }
}