reactjs - REACT JS 如何显示从 onClick 获取的 API 数据?
问题描述
我是初学者,我可以使用 map() 函数获取和显示 API 数据对象。现在我正在尝试创建一个全局获取按钮并使用我获取的 onClick 调用数据。当我使用 console.log 检查 onClick 时,它可以工作,但由于某种原因,我无法在浏览器中显示它并且它没有给我任何错误。
应用组件
import React, {useState, useEffect} from 'react';
import Recipe from "./Recipe";
import Style from "./style.css"
export default function App() {
const [data, setData] = useState([]);
const [search, setSearch] = useState("");
const [myFilter, setFilter] = useState("chicken");
const recipeApi = {/*recipe api address*/}
const fetchData = () => {
fetch(recipeApi)
.then(res => res.json())
.then(result => setData(result.hits))
.catch(err => console.log("error"))
}
useEffect(() => {
fetchData()
}, [myFilter])
const searching = event => {
setSearch(event.target.value)
}
const mySearch = event => {
event.preventDefault();
setFilter(search);
setSearch("");
}
function deleteHandler(index){
setData(
data.filter((element, filterIndex) => index !== filterIndex)
)
}
console.log(fetchData)
return (
<div className="App">
<button type="submit" onClick = {fetchData}>fetch</button>
<form onSubmit = {mySearch} className = "search-form">
<input className = "search-bar" value = {search} onChange = {searching} />
<button className ="search-button" type="submit">search</button>
</form>
<button type="submit" onClick = {fetchData}>search</button> {/*here I call my fetched data */}
<div className = "recipes"
{data.map((element, index)=>(
<Recipe
onDelete={deleteHandler}
title = {element.recipe.label}
image = {element.recipe.image}
name = {element.recipe.source}
index={index}
key = {index}
calories = {element.recipe.calories}
ingredientLines = {element.recipe.ingredientLines[0]}
/>
))
}
</div>
</div>
);
}
子组件
import React from "react";
import style from "./recipe.module.css"
export default function Recipe({title, image, name, calories, index, onDelete,refetch, ingredientLines}){
return (
<div className = {style.recipe}>
<h3>{title}</h3>
<p>{name}</p>
<p>Calories: {calories}</p>
<p>Ingredients: {ingredientLines}</p>
<img className = {style.image} src = {image} alt="" />
<button type="button" onClick={() => onDelete(index)} className="btn btn-danger">Delete</button>
</div>
)
}
解决方案
你不应该使用index
as key
。它可能无法正确更新。
<Recipe
// some props ommitted
key={JSON.stringify(element)}
// if element has an id:
// key={element.id}
/>
推荐阅读
- javascript - Cookie 更新
- outlook-addin - Outlook 插件回调令牌 - getCallbackTokenAsync 返回 null
- c# - Xamarin - 在 .Net 标准库中使用 httpClient
- php - 面向对象 PHP 中的类创建
- r - 迭代列表中的列表
- reactjs - 使用 withRouter 时如何使用“refs”?
- java - JSON 架构:外部 JSON 架构文件未验证 json
- javascript - 什么在 DOM 中初始化 appendChild 的脚本(iframe 中的 src)?
- terraform - Terraform 未知参数或属性是什么
- android - Android socket.IO 中的 Emit 或 Ack 超时处理?