0

我正在使用 react 和 edamam API 创建一个食谱搜索应用程序，但我一次无法从 edamam API 访问超过 2 个食物食谱请求，而免费使用我们最多可以访问 10 个不同的食物食谱。请告诉我我做错了什么，我无法搜索超过 2 种食物选项，而且默认显示的第一个食物食谱是正确的，但是如果我添加其他东西来搜索说香蕉，那么它不会提供香蕉食物食谱，而不是其他东西。

    import React, { useEffect, useState } from 'react';
    import './App.css';
    import Recipe from './Recipe';

   const App = () => {
     
    // Declare state as an empty array bcoz recipe and its data are present 
   in an array 

    const[recipes,setRecipes] =useState([]);
    const[search,setSearch] = useState("");
    const[searchSubmit,setSearchSubmit] = useState('pizza'); //set ice-cream 
     as default value

    //call the getREcipes fxn when the page renders for the first time
    useEffect(() => {
       getRecipes();
    },[searchSubmit]);

    // getRecipes fxn 
    const getRecipes = async () => {
       const response = await fetch(`https://api.edamam.com/search? 
       q=${searchSubmit}&app_id=${APP_ID}&app_key=${APP_KEY}`);
       const data = await response.json();
       setRecipes(data.hits);
       console.log(data.hits);
    }

    const getSearch = (e) => {
      e.preventDefault(); //to stop the page refresh
      setSearchSubmit('search');
      setSearch("");
    }
    //the event e here is a event whenever the input text in the search bar 
    changes

    const updateSearch = (e) => {
       setSearch(e.target.value);
    }

     return (
      <div className ="App">
        <form onSubmit = {getSearch} className="search-bar">
          <input className="search-field" type ="text" value={search} onChange={updateSearch}/>
          <button className="search-btn" type="submit">Search</button>
        </form>
    
        {
          recipes.map(recipe => (   //for each recipe in the recipes array create a recipe component
          <Recipe 
          key = {recipe.recipe.label}
          title = {recipe.recipe.label} 
          calories = {recipe.recipe.calories}
          time = {recipe.recipe.totalTime} 
          image = {recipe.recipe.image}/>
        ))}
        
      </div>
      );
    }

  export default App;

这是第一次加载页面

这是我在搜索字段中输入香蕉的时候，但如果我输入，我没有得到任何与香蕉或其他任何东西相关的食谱。无论给定的输入如何，我都会得到这个

4

0 回答 0