Блог

Поскольку запрос будет извлекать значение, которое указано в useState. Но я хочу, чтобы в строке поиска выполнялся поиск рецептов, предоставленных мной. Кто-нибудь может мне помочь, как я могу это сделать.

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

const App = ()=>{

  const APP_ID= '2*****'
  const APP_KEY= 'f******************'
 
  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState('chicken');


  useEffect(() =>{
    const getRecipes = async()=>{
      const response = await fetch(`https://api.edamam.com/search?q=${query}amp;app_id=${APP_ID}amp;app_key=${APP_KEY}`);
      const data = await response.json();
      setRecipes(data.hits)
        };
        getRecipes();
  },[query]);

 
  const updateSearch = e=>{
    setSearch(e.target.value);
    
  }
  const getSearch = e =>{
    
    setQuery(search);
    setSearch('');
  }  

  return(
    
    <div className="App">
      <form  onSubmit={getSearch} className="search-form"> 
        <input className="search-bar" type="text" value={search} onChange={updateSearch} />
          
          <button className="search-button" type="submit">Search</button>
        
      </form>
      {recipes.map(recipe =>(
        <Recipe
        key={recipe.recipe.label}
        title={recipe.recipe.label}
        calories={recipe.recipe.calories}
        image={recipe.recipe.image} />

      ))}
    </div>
    
  )
}

export default App;
  

• не создавайте несколько состояний для одного и того же.
• передайте строку поиска в fetch API

 import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  const APP_ID = "2***********";
  const APP_KEY = "f*********";

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");

  useEffect(() => {
    try {
      const getRecipes = async () => {
        const response = await fetch(
          `https://api.edamam.com/search?q=${search}amp;app_id=${APP_ID}amp;app_key=${APP_KEY}`
        );
        const data = await response.json();
        setRecipes(data.hits);
      };
      getRecipes();
    } catch (error) {
      // handle error here
      console.error(error);
    }
  }, [search]);

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

  const getSearch = (e) => {
    setSearch("");
  };

  return (
    <div className="App">
      <form onSubmit={getSearch} className="search-form">
        <input
          className="search-bar"
          type="text"
          value={search}
          onChange={updateSearch}
        />

        <button className="search-button" type="submit">
          Search
        </button>
      </form>
      {recipes.map((recipe) => (
        <Recipe
          key={recipe.recipe.label}
          title={recipe.recipe.label}
          calories={recipe.recipe.calories}
          image={recipe.recipe.image}
        />
      ))}
    </div>
  );
};

export default App;
  

Редактировать:

Если изначально вы хотите получать chicken результаты из API, измените переменную response на это:

         const response = await fetch(
          `https://api.edamam.com/search?q=${search || "chicken"}amp;app_id=${APP_ID}amp;app_key=${APP_KEY}`
        );