Reactjs 如何显示从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>
    )
}

import React，{useState，useffect}来自“React”；
从“/Recipe”导入配方；
从“/Style.css”导入样式
导出默认函数App（）{
const[data，setData]=useState（[]）；
const[search，setSearch]=useState（“”）；
const[myFilter，setFilter]=useState（“鸡”）；
常量recipeApi={/*配方api地址*/}
常量fetchData=（）=>{
获取（recipeApi）
.then（res=>res.json（））
.then（result=>setData（result.hits））
.catch（err=>console.log（“错误”））
}
useffect（（）=>{
fetchData（）
}，[myFilter]）
常量搜索=事件=>{
setSearch（事件.目标.值）
}
const mySearch=事件=>{
event.preventDefault（）；
设置过滤器（搜索）；
集合搜索（“”）；
}
函数deleteHandler（索引）{
设置数据(
data.filter（（元素，filterIndex）=>index！==filterIndex）
)
}
console.log（fetchData）
返回(
取来
搜索
搜索{/*这里我称我的获取数据为*/}
(
))
}  
);
}

子组件

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>
    )
}

从“React”导入React；
从“/recipe.module.css”导入样式
导出默认函数配方（{title，image，name，carries，index，onDelete，refetch，ingredientLines}）{
返回(
{title}
{name}

卡路里：{卡路里}

成分：{Ingredinterlines}

onDelete（索引）}className=“btn btn danger”>删除
)
}

您不应该将

索引

用作

键

。它可能无法正确更新

<Recipe
    // some props ommitted
    key={JSON.stringify(element)}

    // if element has an id:
    // key={element.id}  
/>

是否记录了数据？将

控制台.log（fetchData）

更改为

控制台.log（data）

以查看它是否正确。@HMR我尝试使用数据而不是fetchData，它给出了一个error@twharmonI尝试使用data而不是fetchdata时，会出现错误