反应引导卡不会显示答案

【问题标题】：React Bootstrap Card Won't Show反应引导卡不会显示
【发布时间】：2021-06-20 11:24:47
【问题描述】：

我正试图让这张牌和牌组出现。这是我的应用程序和食谱组件。我也安装了 react bootstrap 和 react 。我在控制台和我的 linter 中都没有收到错误。我已经尝试将 Bootstrap 放在 JSX 中以及一个单独的组件中。

这是我的应用中包含 Recipe 组件的 JSX：

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

const App = () => {
  const APP_ID = "fe56f905";
  const APP_KEY = "93ea7b34f667f1384d2a3dacf790cce9";
  const [recipes, setRecipes] = useState([])
  const [search, setSearch] = useState('') 
  const [query, setQuery] = useState('')

  useEffect(() => {
    getAllRecipes()
  }, [query])

  const getAllRecipes = 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()
    setRecipes(data.hits)
    console.log(data.hits)
  }

  const searchUpdate = e => {
    setSearch(e.target.value)
    // console.log(search)
    setQuery('')
  }

  const getQuery = e => {
    e.preventDefault()
    setQuery(search)
  }
  return (
    <div className = "App">
    <form onSubmit={getQuery} className="search">
    <input className="search-bar" type="text" value={search} onChange={searchUpdate} />
    <button className="search-button" type="submit">
    Search
    </button>
    </form>
    {recipes.map(recipe=>(
      <Recipe
      key={recipe.recipe.label}
      name={recipe.recipe.label} 
      calories={recipe.recipe.calories}
      image={recipe.recipe.image}
      ingredients={recipe.recipe.ingredients}
      />
    ))}
    </div>
  )
}

export default App;

这是我的组件：

    import React from 'react'
import { Card, CardDeck } from 'react-bootstrap'

const Recipe = ({name,calories,image,ingredients}) => {
  return (
    <div>
<CardDeck>
  <Card>
    <Card.Img variant="top" src={image} />
    <Card.Body>
      <Card.Title>{name} Calories: {calories}</Card.Title>
      <Card.Text>
        {ingredients.map(ingredient => (
          <li>{ingredient.text}</li>
        ))}
      </Card.Text>
    </Card.Body>
    <Card.Footer>
      <small className="text-muted">Updated.</small>
    </Card.Footer>
  </Card>
  </CardDeck>
    </div>
  )
}

export default Recipe;

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

在渲染组件之前添加一个返回语句

return <Recipe
      key={recipe.recipe.label}
      name={recipe.recipe.label} 
      calories={recipe.recipe.calories}
      image={recipe.recipe.image}
      ingredients={recipe.recipe.ingredients}
      />

【讨论】：

我相信我对这两段代码都有一个返回语句。你到底是什么意思？
重新创建了你的结构，问题可能是你正在映射的空配方数组引起的。尝试按照 {recipes.map(recipe=>console.log(recipe))}
由于某种原因，控制台日志没有出现。我编辑了原始问题以显示我的完整代码。
确保您实际上在食谱状态中保留了一个长度大于 0 的数组。您可以通过使用 React DevTools 或控制台日志来实现它。
应该有什么而不是空数组？