如何仅在 "map" 循环完成时设置状态？

Question

我发送了一些 http 请求，在 Promises 解决后，我需要遍历数组并执行一些异步操作。我想让函数异步，但我只需要在 "map" 循环完成后执行 setState：

fetchData = () => {
 let data = [];
 let tickets  = http.get('/api/zendesk/tickets'),
     users    = http.get('/api/zendesk/users'),
     items    = http.get('/api/orders/items'),
     reqTypes = http.get("/api/support/requests");

 Promise.all([users,tickets,items,reqTypes])
  .then(values => {
    console.log(values);
    let usersArr = values[0].data.users,
      ticketsArr = values[1].data.tickets,
        itemsArr = values[2].data,
      requestArr = values[3].data;

    data = ticketsArr.map((ticket,key) => {

      let id = ticket.custom_fields.find(field => field.id === productions_fields.order_id || field.id === develop_fields.order_id).value;

      id === null ? ticket.Items = [] : ticket.Items = itemsArr.filter(item => item.order_id === parseInt(id));

      ticket.Requests = requestArr.filter(request => request.id === ticket.id);
    })

    this.setState({tickets:data})

  }).catch(err => console.log(err))
 }

是否可以或我需要像 "for" 那样制作同步循环？

Answer 1

I get an array of "undefined objects", Why?

因为您没有在地图体内返回任何东西，默认情况下它 returns undefined.

检查这个片段：

let a = [1,2,3,4].map(el => {
   console.log('el = ', el);
})

console.log('a = ', a);   //array of undefined values

如果要修改现有数组，请使用 forEach 而不是 map。

像这样：

ticketsArr.forEach((ticket,key) => {
    let id = ticket.custom_fields.find(field => field.id === productions_fields.order_id || field.id === develop_fields.order_id).value;
    ticket.Items = (id === null) ? [] : itemsArr.filter(item => item.order_id === parseInt(id));
    ticket.Requests = requestArr.filter(request => request.id === ticket.id);
})

this.setState({ tickets: ticketsArr })

Answer 2

Array.prototype.map 希望您 return 每个元素的最终形式应该如何。现在你没有 returning 任何东西，因此每个元素都变成 undefined.

data = ticketsArr.map((ticket,key) => {
  let id = ticket.custom_fields.find(field => field.id === productions_fields.order_id || field.id === develop_fields.order_id).value;
  id === null ? ticket.Items = [] : ticket.Items = itemsArr.filter(item => item.order_id === parseInt(id));
  ticket.Requests = requestArr.filter(request => request.id === ticket.id);
  return ticket // <- this
})

如何仅在 "map" 循环完成时设置状态？

How to setState only when "map" loop is finished?

javascript

asynchronous

promise

setstate

reactjs