javascript - 无法更改 Axios ReactJS 中的状态并且无法按顺序检索数据

Question

我正在尝试从 RapidAPI 的 API 中获取 COVID-19 的统计数据。我想按日期获取统计数据并将数据插入图表中。问题是 API 链接只能包含日期，如下所示:

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

我所做的是使用 for 循环获取十个日期，并使用 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);
}, []);