为什么 Axios 承诺没有在 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 是人们在我的网站上发布的 cmets，我想检索每个离开 cmets 的人的用户名。 （最初将它们存储到一个数组中）但我不明白为什么在 tempUser 状态下我只有最后一个用户，而在 tempUser2 中我有所有用户，但每次刷新时都是随机顺序。 *一个人可以离开多个cmets。

Answer 1

React 状态更新是异步的。当您将所有 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 fetches (axios.all)，而且由于 axios 使用 Promise，你也可以映射一堆请求并使用 Promise.all，它返回一个包含所有已解析的数组axios 请求，按照它们排队的顺序（如果顺序很重要）。