Блог

Я создаю приложение, из которого я хочу получать данные api https://www.thecocktaildb.com чтобы пользователи могли искать коктейль-напиток, и он будет извлекать данные из источника api для отображения названия напитка на странице. Я не знаю, почему он выдает мне ошибку «Uncaught TypeError: drinkList.drinks не определено», потому что, если вы посмотрите на скриншот, который я включил, как выглядят данные JSON, это должно быть правильно?

Это мой Home.js

 import React, { useEffect, useState } from "react";
import axios from "axios";
import Drinks from "../components/Drinks";

function Home() {
  const [drinkName, setDrinkName] = useState();

 const drinksURL = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`;

  function handleChangeDrink(e) {
    setDrinkName(e.target.value);
  }

  const getDrink = () => {
    axios
      .get(drinksURL)
      .then(function (response) {
        setDrinkName(response.data);
        console.log(drinksURL);
      })
      .catch(function (error) {
        console.warn(error);
      });
  };

  return (
    <main className="App">
      <section className="drinks-section">
        <input
          type="text"
          placeholder="Name of drink (e.g. margarita)"
          onChange={handleChangeDrink}
        />
        <button onClick={getDrink}>Get a Drink Recipe</button>
        <Drinks drinkList={drinkName} />
      </section>
    </main>
  );
}

export default Home;
 

и это мой Drinks.js компонент

 import React from "react";

function Drinks({ drinkList }) {
  if (!drinkList) return <></>;
  return (
    <section className="drinkCard">
      <h1>{drinkList.drinks[0].strDrink}</h1>
    </section>
  );
}

export default Drinks;
 

Это скриншот данных в формате JSON:

Вы должны определить новую переменную для списка напитков

 const [drinkList, setDrinkList] = useState([]);
 

И вы должны назначить свой ответ этой переменной здесь (вместо назначения drinkName):

  const getDrink = () => {
    axios
      .get(drinksURL)
      .then(function (response) {
        setDrinkList(response.data);
        console.log(drinksURL);
      })
      .catch(function (error) {
        console.warn(error);
      });
  };