Невозможно изменить состояние в Ax ios ReactJS и не может получить данные по порядку - PullRequest
Новая
       3

Невозможно изменить состояние в Ax ios ReactJS и не может получить данные по порядку

0 голосов
/ 15 апреля 2020

Я пытаюсь получить статистику c COVID-19 из API от RapidAPI. Я хочу получить статистику по дате, вставить данные в график. Проблема в том, что ссылка API может содержать только дату, например:

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

Что я сделал, так это использовал a для l oop, чтобы получить десять дат и использовать Ax ios для получения данных за каждый день следующим образом: 

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)
        })
    }

}, [])

И проблема в том, что вместо добавления новой даты в массив labels, labels меняется каждый раз, когда Ax ios получает новую свидание.

Я провел какое-то исследование в Интернете, и люди говорят, что что-то вроде данных еще не загружено, поэтому, когда я устанавливаю состояние, оно вроде устанавливает пустые вещи и что-то в этом роде, но я не совсем понимаю, что они говорят.

Кроме того, когда он получает данные, он не получает их по порядку. Например, сегодня 15 апреля, он должен извлекать данные в следующем порядке: 05 06 07 08 09 10 11 12 13 14, но вместо этого он просто скачет случайным образом. Если я укажу его на .then (), то он появится:

img

Как видите, он не в порядке.

Пожалуйста, помогите мне взглянуть, я бы нашел решения, но безрезультатно.

1 Ответ

1 голос
/ 15 апреля 2020

Это связано с тем, что результаты принимаются асинхронно, а состояние обновляется синхронно. Попробуйте это решение 

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