我正在尝试显示来自外部 api 的数据，如果有人可以帮助我解决代码中的问题

Question

this is the error message i am getting TypeError: undefined is not an object (evaluating 'drinkList.drinks[0]')

can you help me please fix the error and give me some solution so that i can use the app to fetch data from the external api?

this is my drink.js code:

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

function Home() {
  const [drinkName, setDrinkName]= useState([]);
  const [drinkList, setDrinkList] = useState([]);
  const drinksURL = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`;

  const handleChangeDrink= e => {
    setDrinkName(e.target.value);
  }

  const getDrink = () => {
    axios
      .get(drinksURL)
      .then(function (response) {
        setDrinkList(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={drinkList} />
      </section>
    </main>
  );
}

export default Home;

this is my Drink.js code:

import React from "react";

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

export default Drinks;

Answer 1

Couple of problems here...

1. drinkName is initialised as an array but it appears to be expecting a string
2. drinksUrl is never updated
3. An empty array is still truthy

Some easy fixes

const [drinkName, setDrinkName]= useState(null) // initialise as null
const [drinkList, setDrinkList] = useState([])

// don't include the "s" parameter here
const drinksURL = "https://www.thecocktaildb.com/api/json/v1/1/search.php"

const getDrink = () => {
  // pass drinkName as a param
  axios.get(drinksURL, {
    params: { s: drinkName }
  }).then(({ data }) => {
    setDrinkList(response.data)
  }).catch(console.warn)
}

and in Drink.js

function Drinks({ drinkList }) {
  // check the array length
  return drinkList.length && (
    <section className="drinkCard">
      <h1>{drinkList.drinks[0].strDrink}</h1>
    </section>
  )
}