JavaScript Асинхронный в Redux ..?

Question

Действие в действии (действие для данных, импортированных из firstore). Здесь вы получаете индексные данные.

export async function getUserIndex (data){


    let db = loadFB().firestore();
    console.log(data)
    let date = moment(data).utc().format()
    let query = db.collection('users').where("create_date", ">", date)
    console.log(query)
    return await query.get().then(docs=>{
        let result =  docs.size
        console.log("result!!", result)
        return  result
    })
}

компоненты в функции

    async getuserIndex_component(date){
        let number =""
        number = await userAction.getUserIndex(date)
        console.log("number",number)
        return await number
    }

const {user_list} = this.props; //user_list = [{id:aa, pw:bb},{id:cc, pw:dd}...} data
        let data = user_list
        let groups = {} 
        let number =0
        for (let index_data of data) {
            let date = moment(index_data.create_date).format("YYYY-MM-DD").slice(0, 10)

            let index = this.getuserIndex_component(date) //<==here log Promise{<pendding>}
            console.log(index)            
            if (groups[date]) {   
                let group = groups[date];
                group.push({ index: index-number, ...index_data });    
            } else {
                number =0;
                groups[date] = [{ index:  index-number, ...index_data }]
            }
            number++;
        }
        const dates = Object.keys(groups)
        const user_list_result = []
         for (let date of dates) {   
            user_list_result.push(...(groups[date]))
        }

return(...)

Я использую избыточность. в действии Сделал getUserIndex ().

Затем компонент получит доступ к getUserIndex и получит данные. Но в console.log есть только ожидающие обработки, и нужные мне данные не отображаются.

В этой ситуации я хотел бы знать, как работать с asyn c in for of.

Я хочу знать, в какой части я делаю ошибку.

Таким образом, функции в компонентах выполняются позже, чем рендеринг. Таким образом, индекс в рендере не содержит данных. Какое решение для этого?

Answer 1

Поскольку getuserIndex_component асинхронный, он вернет обещание. Вам нужно будет дождаться разрешения этого обещания, прежде чем станет доступен результат index.

Во-первых, вы сможете упростить getuserIndex_component до

async getuserIndex_component(date) {
  let number = await userAction.getUserIndex(date)
  console.log("number", number)
  return number
}

И при удалении console.log это может быть просто

async getuserIndex_component(date) {
  return userAction.getUserIndex(date)
}

Как я уже упоминал в комментариях. Вы можете отправить все асинхронные вызовы c, а затем просто дождаться разрешения всех обещаний через Promise.all.

Примерно так. (Я не мог проверить ничего из этого, но это должно продемонстрировать общую идею.)

const { user_list } = this.props; //user_list = [{id:aa, pw:bb},{id:cc, pw:dd}...} data
let data = user_list
let groups = {}
let number = 0

const dates = []
const promises = data.map((index_data) => {
  const date = moment(index_data.create_date).format("YYYY-MM-DD").slice(0, 10)
  dates.push(date) // To use after all promises resolve.
  return this.getuserIndex_component(date) // The index promise.
})

const indexes = await Promise.all(promises)

for (let i = 0; i < dates.length; i++) {
  const index = indexes[i]
  const date = dates[i]

  console.log(index)
  if (groups[date]) {
    let group = groups[date];
    group.push({
      index: index - number,
      ...index_data
    });
  } else {
    number = 0;
    groups[date] = [{
      index: index - number,
      ...index_data
    }]
  }
  number++;
}
const dates = Object.keys(groups)
const user_list_result = []
for (let date of dates) {
  user_list_result.push(...(groups[date]))
}

return (...)