Отображение данных в React и получение - TypeError: Object (...) (...) не определено

Question

Я получаю сообщение об ошибке TypeError: Object (...) (...) не определено. При попытке отобразить.

drinks  
0   
strDrink    "'57 Chevy with a White License Plate"
strDrinkThumb   "https://www.thecocktaildb.com/images/media/drink/qyyvtu1468878544.jpg"
idDrink "14029"
1   
strDrink    "155 Belmont"
strDrinkThumb   "https://www.thecocktaildb.com/images/media/drink/yqvvqs1475667388.jpg"
idDrink "15346"
2   
strDrink    "747 Drink"
strDrinkThumb   "https://www.thecocktaildb.com/images/media/drink/8ozumt1572901761.jpg"
idDrink "178318"

Напитки - это массив объектов.

Я извлекаю данные в контексте

 const [cocktails, setCocktails] = useState([]);

  const baseUrl = 'https://www.thecocktaildb.com/api/json/v1/1/';

  const fetchCocktailList = async () => {
    try {
      const res = await fetch(`${baseUrl}filter.php?c=Cocktail`);
      const data = await res.json();
      console.log(data);
      return data;
    } catch (err) {
      console.log('Error fetching data');
    }
  };

  useEffect(() => {
    setLoading(true);
    fetchCocktailList().then((data) => setCocktails(data));
    setLoading(false);
  }, []);

и отображаю их так

const DrinkList = ({ drinks, isLoading }) => {
  return (
    <div className='drink-list-wrapper'>
      {isLoading ? (
        <h2>Loading...</h2>
      ) : (
        drinks.map((drink) => <DrinkItem key={drink.idDrink} drink={drink} />)
      )}
    </div>

Если бы кто-то мог мне это объяснить? Сначала я попытался сделать начальное значение коктейлей для пустого объекта.

const DrinkPage = () => {
  const { cocktails } = useContext(DataContext);
  const { isLoading } = useContext(DataContext);
  return (
    <div>
      <DrinkList drinks={cocktails} isLoading={isLoading} />
    </div>
  );
};

Я получил данные console.logged и он говорит, что это объект.

Answer 1

fetchCocktailList возвращает данные, однако ловушка интерпретирует, что она возвращает Обещание: fetchCocktailList().then((data) => setCocktails(data));

Я предлагаю переместить fetchCocktailList внутрь крючка, поскольку он используется только там; переместите логи c, связанные с извлечением (изменением состояния) внутри функции.

const [cocktails, setCocktails] = useState([]);

useEffect(() => {
    const fetchCocktailList = async () => {
        const baseUrl = "https://www.thecocktaildb.com/api/json/v1/1/";

        setLoading(true);

        try {
            const res = await fetch(`${baseUrl}filter.php?c=Cocktail`);
            const data = await res.json();
            console.log(data);

            setCocktails(data);
            setLoading(false);
        } catch (err) {
            console.log("Error fetching data");

            setLoading(false);
        }
    };

    fetchCocktailList();
}, []);

Это, однако, не похоже на полученную ошибку, но может помочь выяснить ее. Ошибка может появиться из возвращенного data, убедитесь, что он возвращает массив элементов, а не объект со свойством, содержащим массив, например: { drinks: [] }.