1

Estoy empezando con React y quiero consumir la API de pokemon, recibo ya los datos y los paso por una funcion map, luego por props le envio los datos a un componente donde tengo una tabla, la tabla esta hecha con Material-UI, el problema es que cuando quiero renderizar los datos dentro de la tabla los titulos se repiten 10 veces, como podria solucionarlo?

Gracias de antemano!!

Llamado a la API

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Lista } from '../components/Lista';

export const PokemonApi = () => {

    const [poke, setPoke] = useState([]);

    const data = () => {        
        
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10&offset=20').then(( response ) => {
    
            setPoke(response.data.results);
            console.log(response.data.results);
    
        })
        .catch( err => {
            console.log(err);
        })

    }

    useEffect(() => {

        data()

    }, []);

    return (

        <div>
            {
                poke.map(( info, id ) => {

                    return <Lista key={ id } info={ info } />

                })
            }
        </div>
    )
}

Tabla donde se debe renderizar

export const Lista = (props) => {


    const classes = useStyles();

    return (
        <div>
            <Container maxWidth="md">
                <TableContainer component={Paper}>
                    <Table className={ classes.table } size="small" aria-label="a dense table">
                        <TableHead>
                            <TableRow>
                                <TableCell>Nombre</TableCell>
                                <TableCell align="right">Img</TableCell>
                            </TableRow>
                        </TableHead>

                        <TableBody>
                            <TableRow key={props.info.name}>
                            <TableCell component="th" scope="row">
                                {props.info.name}
                            </TableCell>
                            <TableCell align="right">{props.info.url}</TableCell>
                            </TableRow>

                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </div>
    )
}

Asi es como se ve la tabla:

Titulos repetidos

1
  • Lograste solucionarlo? Tengo el mismo problema y no logro dar con una solución
    – Eduardo
    Commented el 24 may. 2023 a las 6:14

2 respuestas 2

1

El problema está justamente en el map. Estás recorriendo todo el array de resultados y mostrando un componente Lista por cada elemento que exista en este.

Así pues, la línea de títulos aparecerá una vez por elemento. Para que funciona como quieres, lo único que debería estar dentro del bucle debería ser la siguiente parte:

<TableRow key={props.info.name}>
                            <TableCell component="th" scope="row">
                                {props.info.name}
                            </TableCell>
                            <TableCell align="right">{props.info.url}</TableCell>
                            </TableRow>
1
  • Osea que debo de moverlo a un componente unicamente con eso? Porque lo intente pero sigue ocurriendo el mismo inconveniente
    – Nvidia99
    Commented el 22 jul. 2021 a las 20:09
0

Esta sucediendo por el React Strict Mode, quita el componente <React.StrictMode> del archivo index.js y seguramente dejara de renderizarse varias veces.

debe quedar solo el App.

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 28 dic. 2022 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.