切片无法正常工作|反应

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

这是对象events：

但我在我的应用中看不到任何事件（一个事件基本上是li）。而且我认为这只会默认显示我的四个事件（showCount: 4）。因为我想要一个按钮，以后会显示所有这些按钮。

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

干杯！

Answer 1

如果您的res与{event: []}不同，则应执行以下操作：

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