trabajando en un proyecto utilizando la API de Brewdog que representará la información de las diferentes cervezas en tarjetas con su información. Sin embargo, no puedo entender por qué los componentes de la tarjeta no se procesan. ¡Cualquier pensamiento / ayuda sería muy sugerido!
La API ha obtenido los datos en App.jsx y los ha pasado a través de accesorios a través de CardArea hasta el árbol hasta la tarjeta. React Devtools muestra que el estado ha pasado a través de la matriz de objetos de cerveza y no recibo ningún error de compilación o error de consola.
¡Gracias de antemano!
APLICACIÓN.JSX
import { useState, useEffect } from 'react' import NavBar from "./components/NavBar"; import CardArea from "./components/CardArea"; const App = () => { const [beers, setBeers] = useState([]) const getBeerData = () => { const API_URL = "https://api.punkapi.com/v2/beers" fetch(API_URL) .then((res) => res.json()) .then((jsonResponse) => { setBeers(jsonResponse) }) } useEffect(() => { getBeerData() }, []) return ( <> <main className={styles.main}> <NavBar /> <CardArea beers={beers}/> </main> </> ); } export default App;área de tarjeta
import styles from './CardArea.module.scss' import CardList from '../CardList/CardList' import NotFound from '../NotFound/NotFound' const CardArea = (props) => { const { beers } = props; const contentJsx = beers.length ? ( <CardList beers={beers} /> ) : ( <NotFound /> ); return <section className={styles.cardArea}>{contentJsx}</section> } export default CardArea;Lista de tarjetas
import Card from '../Card/Card' import styles from './CardList.module.scss' const CardList = (props) => { const { beers } = props; const getBeerCardsJsx = (beer) => { <div className={styles.card} key={beer.id}> <Card beer={beer} /> </div> } return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section> } export default CardListTarjeta.JSX
import React from 'react' import styles from './Card.module.scss' const Card = (props) => { const { name, tagline, abv, description } = props.beer; return ( <div className={styles.card}> <img className={styles.img} alt={name}></img> <section> <h1>{name}</h1> <h4>{tagline}</h4> <p>ABV: {abv}%</p> <p>{description}</p> </section> </div> ) } export default CardEn su función getBeerCardsJsx , le falta una declaración de retorno porque su función de flecha usa llaves y no tiene una declaración de retorno explícita (el paréntesis de flecha no tiene un retorno implícito cada vez que usa llaves). Por lo tanto, la función termina devolviendo undefined , que React trata como nada para que no vea nada renderizado ni ningún error.
Para solucionar este problema, reemplace los corchetes con corchetes redondos:
import Card from '../Card/Card' import styles from './CardList.module.scss' const CardList = (props) => { const { beers } = props; const getBeerCardsJsx = (beer) => ( // instead of { <div className={styles.card} key={beer.id}> <Card beer={beer} /> </div> ) // instead of } return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section> } export default CardListO puede agregar una declaración de devolución explícita:
import Card from '../Card/Card' import styles from './CardList.module.scss' const CardList = (props) => { const { beers } = props; const getBeerCardsJsx = (beer) => { return ( <div className={styles.card} key={beer.id}> <Card beer={beer} /> </div> ) } return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section> } export default CardListFalta la palabra clave de retorno en la función getBeerCardsJsx