reactjs - 表单提交不适用于 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;
解决方案
你uesEffect
的依赖数组是空的,所以它只在第一次渲染时渲染,因为它永远不会改变。我想你的意思是把[query]
它放进去。或者,您可以getRecipe()
直接在handleSubmit()
推荐阅读
- php - 更改 Apache 根路径时出错
- python - 数据集python上的Groupby函数
- android - PEPK 工具的加密密钥有问题
- python - wxpython如何防止BoxSizer在调整窗口大小时折叠?
- postgresql - 批量加载后将只读表置于未记录模式有什么缺点吗?
- aws-appsync - 如何为“最喜欢”的 Appsync 创建 GraphQl 解析器
- swift - 如何将用户数据从 Cordova 应用程序迁移到本机 Swift 应用程序?
- linux - Linux 内核 DTSI 文件无法从 Yocto 为 BeagleBone 编译
- php - 带有 Bearer 令牌的 Laravel API - 中间件 auth:api
- node.js - azure 应用服务上的 Angular 应用 - 从资产文件夹加载配置文件时出现 404 错误