javascript - 切片无法正常工作 | react

Question

在我的构造函数中我有这个:

constructor(props) {
  super(props)
  this.state = {
    showCount: 4,
    event: [],
    customer: [],
    lock: []
  }
}

在我的 componentDidMount 中，我有这个:

componentDidMount() {
  const { data } = this.props
  axios.get('http://34.248.65.20:3000/customers').then(res => {
    this.setState({
      res,
      data: res.data
    })
  })

  axios.get('http://34.248.65.20:3000/events').then(res => {
    this.setState({
      res,
      data: res.data
    })
  })

  axios.get('http://34.248.65.20:3000/locks').then(res => {
    this.setState({
      res,
      data: res.data
    })
  })
}

在我的渲染中我有这个:

const { event, customer, lock, data } = this.state
const keyedCustomers = _.keyBy(customer, '_id')
const keyedLocks = _.keyBy(lock, '_id')

const events = event
  .slice(0, this.state.showCount)
  .map((event, i) =>
    <EventItem
      key={i}
      event={event}
      customer={keyedCustomers[event.customer] || {}}
      lock={keyedLocks[event.lock] || {}}
    />
  )
console.log(events) // A lot of object

这是对象事件:

但我在应用程序中没有看到任何事件(一个事件基本上是 li)。我认为默认情况下这只会显示我的四个事件 (showCount: 4)。因为我想要一个稍后显示所有内容的按钮。

谁能告诉我我在这里做错了什么？

干杯!

Answer 1

如果您的 res 与 {event: []} 不同，您应该这样做:

 axios.get('http://34.248.65.20:3000/events').then(res => {
    this.setState({
      ...
      event: res.data
    })
  })