如何在 React.js 中获取输入值以获取 API 数据

Question

I want to make a search input where the user inputs a type of food (eg pasta) and it takes the input and plugs it into the URL where it specified ${type} to display the recipes from Spoonacular.com to match that user input with .

This is my Home.js

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

function Home() {
  const [food, setFood] = useState();
  const [type, setType] = useState();

  const URL = `https://api.spoonacular.com/recipes/complexSearch?apiKey=${APIKey}&query=${type}&number=2`;

  function handleChange(e) {
    setType(e.target.text);
  }

  useEffect(() => {
    axios
      .get(URL)
      .then(function (response) {
        setFood(response.data);
        console.log(URL);
      })
      .catch(function (error) {
        console.warn(error);
      });
  }, []);

  return (
    <main className="App">
      <input
        type="text"
        placeholder="Name of food (e.g. pasta)"
        onChange={handleChange}
      />
      <button onClick={}>Get a Recipe</button>
      <Recipe recipeList={food} />
    </main>
  );
}

export default Home;

and here is my recipe.js component

import React from "react";

function Recipe({ recipeList }) {
  if (!recipeList) return <></>;
  return (
    <div className="recipeCard">
      <h1>{recipeList?.title}</h1>
      <img src={recipeList?.image} alt="Food" />
    </div>
  );
}

export default Recipe;

Answer 1

You need to specify the GET query parameters to the axios call. When you are defining the URL, type , which is the user input, is not yet defined.

const URL = `https://api.spoonacular.com/recipes/complexSearch`;

const params = {
   apiKey: yourImportedApiKey,
   number: 2,
   query: type
};

// get recipe
const getRecipe = () => {
    axios
      .get(URL, params)
      .then(function (response) {
        setFood(response.data);
        console.log(URL);
      })
      .catch(function (error) {
        console.warn(error);
      });
}

Then point onClick to the submit handler name you chose for your axios call.

<button onClick={getRecipe}>Get a Recipe</button>