无法更改Axios ReactJS中的状态，也无法按顺序检索数据

Question

我正在尝试从RapidAPI的接口中获取新冠肺炎的统计数据。我想按日期获取统计数据，将数据插入到Graph中。问题是API链接中只能包含日期，如下所示：

https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-04-15

我所做的是使用for循环获取10个日期，并使用Axios检索每天的数据，如下所示：

const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');

const [labels, setLabels] = useState([])

useEffect(() => {

    for(let i=dd-10; i<dd; i++) {
        Axios({
            method: 'GET',
            url: `https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-${mm}-${i}`,
            headers: {
                "x-rapidapi-host": "covid-19-data.p.rapidapi.com",
                "x-rapidapi-key": "cfb0f14a9fmsh913ae802309e7c9p175585jsn825aebcbd5ac"
            }
        })
        .then(response => {
            let temp = [...labels]
            temp.push(response.data[0].date)
            setLabels(temp)
        })
        .catch(error => {
            console.log(error)
        })
    }

}, [])

问题是，每次Axios检索新日期时，labels都会更改，而不是将新日期附加到labels数组中。

我在网上做了一些研究，人们说像数据这样的东西还没有加载，所以当我设置状态时，它会设置一些空的东西，诸如此类的东西，但我不太明白他们在说什么。

除此之外，当它检索数据时，它不会按顺序检索数据。例如，今天是4月15日，它应该按如下顺序检索数据：05 06 07 08 09 10 11 12 13 14，但它只是随机跳转。如果我在.then()中使用console.log命令，将会出现以下内容：

​

​

如你所见，这是不符合规则的。

请帮我看一下，我已经在谷歌上搜索了解决方案，但没有用。

Answer 1

这是因为结果是异步接收的，而状态是同步更新的。尝试此解决方案

useEffect(() => {
  const today = new Date();
  const dd = String(today.getDate()).padStart(2, "0");
  const mm = String(today.getMonth() + 1).padStart(2, "0");

  const fetchData = async (date) => {
    if (date >= dd) return;

    const result = await Axios({
      method: "GET",
      url: `https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-${mm}-${date}`,
      headers: {
        "x-rapidapi-host": "covid-19-data.p.rapidapi.com",
        "x-rapidapi-key": "cfb0f14a9fmsh913ae802309e7c9p175585jsn825aebcbd5ac",
      },
    });

    setLabels((val) => {
      let temp = [...val];
      temp.push(result.data[0].date);
      return temp;
    });
    fetchData(++date);
  };

  fetchData(dd - 10);
}, []);