почему Ax ios promises не выполняется по порядку в React

Question

useEffect(() => {    
    if(reviewsData) {      
      reviewsData.forEach( item =>          
        {
          if(item)
          {            
            item.text.forEach((review,i) =>            
                {                  
                  axios({
                    method: "post",
                    url: "http://localhost:5000/retrieveuserbyid",
                    data: {
                      userId: item.user
                    },
                    headers: {
                      authToken: localStorage.getItem("authToken"),
                      "Content-Type": "application/json"
                    }
                  }).then(res => {                      
                      const name =res.data.name;                      
                      setTempUser([...tempUser , name]);                      
                      tempUser2 = [...tempUser2, name];                      
                      console.log(name);                     
                      console.log(tempUser2);     
                    }).catch(err => {                     
                    });                   
                }              
             )             
          }        
      }      
      );
    }
  }, [reviewsData]
);

reviewsData.text - это комментарии, которые люди публикуют на моем сайте, и я хочу получить имя пользователя для каждого человека, оставляющего комментарии. (сначала сохраните их в массиве), но я не понимаю, почему в состоянии tempUser у меня есть только последний пользователь, а в tempUser2 у меня есть все пользователи, но в случайном порядке каждый раз, когда я обновляю sh. * Один человек может оставлять несколько комментариев.

Answer 1

Обновления состояния реакции асинхронны. Когда вы ставите в очередь все обещания ax ios, текущее значение tempUser включается и используется для всех обновлений состояния. Однако, если вы используете обновление функционального состояния, они могут быть правильно поставлены в очередь и обработаны. Обновления функционального состояния позволяют каждому обновлению в очереди получать доступ к предыдущему обновлению, т. Е. Каждое обновление зависит от предыдущего.

then(res => {                      
  const name =res.data.name;                      
  setTempUser(tempUser => ([...tempUser , name]));                      
  tempUser2 = [...tempUser2, name];                      
  console.log(name);                     
  console.log(tempUser2);     
})

Примечание: Ax ios поддерживает одновременных выбирает (axios.all), а поскольку ax ios использует обещания, вы также можете сопоставить кучу запросов и использовать Promise.all, который возвращает массив всех разрешенных запросов ax ios в порядке их постановки в очередь вверх (если порядок имеет значение).