为什么Axios Promise无法在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中我却拥有所有用户，但是每次刷新时都是随机的。 *一个人可以发表多条评论。

Answer 1

反应状态更新是异步的。当所有axios排队时，将封装tempUser的当前值并将其用于

all状态更新。但是，如果使用功能状态更新，则可以将它们正确排队并进行处理。功能状态更新允许每个排队的更新访问前一个更新，即每个更新都取决于前一个更新。

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

旁注：Axios能够concurrent提取（axios.all），并且由于axios使用了promises，因此您还可以映射一堆请求并使用Promise.all，它返回所有已解决的axios请求的数组，按照他们排队的顺序（如果顺序很重要）。