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

Question

我试图从RapidAPI的API中获取2019年冠状病毒病的统计数据。我想按日期获取统计数据，将数据插入图形。问题是API链接只能有一个日期，像这样：

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

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检索新日期时，标签都会更改，而不是将新日期附加到标签数组。

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

此外，当它检索数据时，它不会按顺序检索数据。例如，今天是4月15日，它应该按如下顺序检索数据：0506070809101121314，但它只是随机跳转。如果I console.log位于.then（），则会显示：

如你所见，这不是顺序。

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




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);
}, []);