在react中从API搜索特定项目

Question

我在这里使用 API 在 React 中创建食物食谱应用程序，我从 API 获取了所有食谱， 现在我想将 API 中的特定菜肴作为菜肴类型。 但我没有从 API 获得任何数据。 这是我的 App.js 代码：

function App() {
  return (
   <>
   <BrowserRouter>
   <Category/>
   <Pages/>
   </BrowserRouter>
   </>
  );
}

export default App;

品种的主要成分：

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import {useParams} from 'react-router-dom'

export default function Variety () {
  const [variety,setVariety]=useState([]);
  let params=useParams();

  const getVariety=async (name) =>{
    const data=await fetch(`https://api.spoonacular.com/recipes/complexSearch?apiKey=${process.env.REACT_APP_API_KEY}&variety=${name}`)
    const recipe = await data.json();
    setVariety(recipe.result);
  };

useEffect(()=>{
  getVariety(params.type);
},[params.type]);

  return 
    <Grid>
      {variety.map((item)=>{
        return(
          <Card key={item.id}>
            <img src={item.image} alt=""/>
            <h4>{item.title}</h4>
          </Card>
        )
      })}
    </Grid>
  
}

const Grid =styled.div`
display:grid;
grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
grid-gap:3rem
`
const Card=styled.div`
img{
width:100%;
border-radius:2rem;
}

a{
text-decoration:none;
}

h4{
text-align:center;
margin:2rem;
}

`

这是菜肴的品种：

import {FaPizzaSlice,FaHamburger } from 'react-icons/fa';
import {GiNoodles,GiChopsticks } from 'react-icons/gi';
import styled from 'styled-components';
import {NavLink} from 'react-router-dom';
import React from 'react';

export default function Category() {
  return (
    <List>
      <NavLink to={'/Variety/Italian'}> 
        <FaPizzaSlice/>
        <h4>Italian</h4>
        </NavLink>
        <NavLink  to={'/Variety/American'}>
        <FaHamburger />
        <h4>American</h4>
        </NavLink>
        <NavLink  to={'/Variety/Chinese'}>
        <GiNoodles/>
        <h4>Chinese</h4>
        </NavLink>
        <NavLink  to={'/Variety/Japanese'}>
        <GiChopsticks/>
        <h4>Japanese</h4>
        </NavLink>
    </List>
  )
}

最后一个是将品种显示到 URL 中以搜索特定品种：

import React from 'react'
import Home from './Home'
import {Route,Routes} from 'react-router-dom';
import Variety from './Variety ';

function Pages() {
  return (
   
      <Routes>
        <Route path='' element={<Home/>}/>
        <Route path='/Variety/:type' element={<Variety/>}/>
      </Routes>
    
  )
}

export default Pages

如果有人有任何解决方案，请帮忙！

Answer 1

可能会导致两个潜在问题：

1- 您在 API 调用中使用

variety=${name}

作为查询参数，但该 API 似乎没有“variety”参数。相反，您可以使用“烹饪”、“饮食”等参数。如果您想过滤烹饪类型，只需尝试将“品种”替换为“烹饪”即可。

2-API 响应可能不包含“结果”字段。相反，您可以使用保存项目列表的“结果”数组（注意：“结果”应该是复数）。只需将您的代码更新为 setVariety(recipe.results);

3-如果上述解决方案不起作用，请将配方记录到控制台。这将允许您验证是否从 API 接收数据。您可以在此处分享您的控制台输出。 const 配方=await data.json(); console.log（食谱）