React JS刷卡显示替代卡而不是每张卡

Question

我正在尝试使用react-swipe-card来刷卡。我还有自己的功能，可以将喜欢或不喜欢的用户添加到适当的对象liked和disliked中。但是，它不显示每张卡，而是显示备用卡。有人可以帮忙吗？

const users = {
  '0ggijDr0VpfRZO23f4R6QCSnlJw2': {
    firstName: 'Joe'
  },
  '6VNYWdIKkhfqnJpYpvk2xWX9pqx2': {
    firstName: 'Grace'
  },
  AxVNYWdIKkhfqnJpYpvk2xWX9pq1: {
    firstName: 'John'
  }
}

在此用户对象中，userId是键。

const Wrapper = ({ data, onSwipeLeft, onSwipeRight }) => {
  return (
    <Cards onEnd={console.log("action('end')")} className='master-root'>
      {Object.keys(data).map(item => (
        <Card
          key={data[item]}
          onSwipeLeft={() => onSwipeLeft()}
          onSwipeRight={() => onSwipeRight()}
        >
         <h2>{data[item].firstName}</h2>
       </Card>
      ))}
    </Cards>
  )
}

export default class MyCards extends Component {
  state = {
    data: users,
    liked: {},
    disliked: {}
  }

  onSwipeLeft = () => {
    const newData = Object.assign({}, this.state.data)

    let dislikedId = Object.keys(this.state.data).shift()

    let dislikedTemp = Object.assign({},{ [dislikedId]: this.state.data[dislikedId] })

    delete newData[dislikedId]

    const newDisliked = Object.assign({}, this.state.disliked, dislikedTemp)

    this.setState({ data: newData, disliked: newDisliked })
  }

  onSwipeRight = () => {
    const newData = Object.assign({}, this.state.data)

    let likedId = Object.keys(this.state.data).shift()

    let likedTemp = Object.assign({}, { [likedId]: this.state.data[likedId] })

    delete newData[likedId]

    const newLiked = Object.assign({}, this.state.liked, likedTemp)

    this.setState({ data: newData, liked: newLiked })
  }

render () {
  return (
    <div>
      <Wrapper
        onSwipeLeft={this.onSwipeLeft}
        onSwipeRight={this.onSwipeRight}
        data={this.state.data}
      />
    </div>
  )
 }
}

来源参考：https://github.com/alexandre-garrec/react-swipe-card

我无法弄清楚为什么它不显示每张卡。有人可以帮忙吗？