首页 > 解决方案 > 表单提交不适用于 React Food App

问题描述

我正在尝试使用 Edamam API 构建这个 React Food 应用程序。默认情况下,React App 正在获取我将状态设置为“鸡”的数据,但是当我通过表单提交值时,它不会获取数据。提交表单时,我正在使用 useEffect 呈现我的页面。

状态和使用效果

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

function App() {

  const APP_ID = "personalId";
  const APP_KEY = "personalKey";

  const [recipeData, setrecipeData] = useState([])

  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("Chicken");

  useEffect( () => {
    getRecipe();
  },[] )

获取 API

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

事件处理


  function handleChange(event){
    
    console.log(event.target.value);
    setSearch(event.target.value);
    
  }

  function handleSubmit(event){
    event.preventDefault();
    setQuery(search);
   
  }

成分

  return (
    <div className="App">
      <h1>Recipe App</h1>
      <form onSubmit={handleSubmit} className="search-form">
        <input className="search-bar" type='text' onChange={handleChange} value={search}/>
        <button className="search-button" type="submit">Search</button>
      </form>
      {recipeData.map( eachRecipe =>(
        <Recipe
          key = {eachRecipe.recipe.label}
          title = {eachRecipe.recipe.label}
          calorie = {eachRecipe.recipe.calories}
        /> )) 
        }

    </div>
  );
}

export default App;

标签: reactjsrest

解决方案


uesEffect的依赖数组是空的,所以它只第一次渲染时渲染,因为它永远不会改变。我想你的意思是把[query]它放进去。或者,您可以getRecipe()直接在handleSubmit()


推荐阅读