Реакция: вызов API завершается неудачно, когда я обновляю страницу

#javascript #reactjs #axios

Вопрос:

Вот мой код:

 import Base from "./Base";
import axios from "axios";
import { createData } from "../../utils";
import { useState, useEffect } from "react";

export default function Today(props) {
  const [scoops, setScoops] = useState(0);

  //Fetch api/scoops/today
  const fetchScoops = async () => {
    const res = await axios.get("http://localhost:8000/api/scoops/today/");
    setScoops(res.data);
  };
  useEffect(() => {
    fetchScoops();
  }, []);

  console.log(scoops[0]);

  const rows = [
    createData(0, 1, scoops[0].title, "http://example.com"),
    createData(1, 2, "Paul McCartney", "http://example.com"),
    createData(2, 3, "Tom Scholz", "http://example.com"),
    createData(3, 4, "Michael Jackson", "http://example.com"),
    createData(4, 5, "Bruce Springsteen", "http://example.com"),
  ];

  return <Base rows={rows} duration="Today" />;
}

Вот что возвращает консоль:

 > undefined
> Today.js:20 {url: 'http://localhost:8000/api/scoops/1/', title: 'Hello World!', rank: 0, created_at: '2021-10-05T04:44:52.027336Z', updated_at: '2021-10-05T04:44:52.027336Z'}

Проблема в том, что при обновлении страницы я получаю следующее сообщение об ошибке:

 TypeError: Cannot read properties of undefined (reading 'title')

Помощь была бы очень признательна!

Обновление: Дополнительная цепочка решила проблему, это отлично работает.

 scoops[0]?.title

1. Когда вы обновите страницу, scoop (локальная стадия) будет установлена как 0. В этом-то и проблема. Попробуйте инициализировать массив следующим образом const [scoops, setScoops] = useState([]);

2. Попытался инициализировать его таким образом, но безуспешно!

Ответ №1:

Вы можете установить начальное scoops состояние в []

 const [scoops, setScoops] = useState([]);

визуализация scoops при извлечении данных с помощью conditionalRendering

 return <> {scoops.lenght > 0 amp;amp; <Base rows={rows} duration="Today" />} </>;

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

Ответ №2:

Проблема в том, что вы инициализируете scoops как 0 , но используете его как массив: scoops[0]

Попробуйте инициализировать scoops как пустой массив. Так что что-то вроде этого должно сработать:

 const [scoops, setScoops] = useState([]);

Кроме того, где вы это делаете: scoops[0].title вместо этого вы должны использовать необязательную цепочку и использовать scoops[0]?.title