javascript - 如何仅在 "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?

因为您没有在 map 主体内返回任何内容，并且默认情况下它返回未定义。

检查此片段:

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 })