1

Eai, comecei com reactjs a pouco tempo e decidi fazer um site com funções simples para ir aprendendo, uma dessas funções seria listar em formato de cards alguns dados que recebo do backend, mas quando tento listar os card apresenta o erro:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Dei uma olhada na net sobre esse erro mas não entendi muito bem o que podeia estar causando esse erro na minha aplicação, tenho dois componentes uma seria o componente PageInicial, que reúne todos os componentes da pagina, e o componente de Card, deixarei o código dos dois componentes a baixo, se alguém conseguir identificar onde poderia ser o erro e explicar o porque ele ocorre ajudaria muito, obrigado.

Código do componente PageInicial:

import React, { useState, useEffect } from "react"
import NavBar from "../../componentes/navbar/navbar"
import { Container, Row, Col } from 'reactstrap'
import api from '../../api'
import CardAnime from '../../componentes/card/card' 

const PageInicial = () => {

    const [animes, setAnimes] = useState([]);
    const [pageTotal, setPageTotal] = useState(0);
    const [pageAtual, setPageAtual] = useState(1);
    const [limitePorPage, setLimitePorPage] = useState(40);

    useEffect(() => {
        api.get(`/animes/listar/${pageAtual}/${limitePorPage}`).then((response) => {
            if (response.data.status) {
                console.log(response.data.erro);

            } else {
                setAnimes(response.data.animes);
                setPageTotal(response.data.pageTotal)
            }
        })
        

    }, [pageAtual]);
    return (
        <div>

            <NavBar page="home" />
            <Container fluid >
                <Row >
                    {
                        animes.map((anime)=>{
                            return (
                                <Col key={anime.id_lista} xl="3" lg="3" md="4" sm="6" >
                                    <CardAnime anime={anime} />
                                 </Col>
                             )
                        })
                    }
               
                </Row>
            </Container>

        </div>
    )
}

export default PageInicial;

Código do componente Card:

import React, { useState, useEffect } from 'react';
import {
    Modal, ModalHeader, ModalBody, ModalFooter,
    Card, Badge, CardImg, CardText,
    CardBody, CardTitle, CardSubtitle,
    Button, ListGroup, ListGroupItem
} from 'reactstrap';
import './card.css';
import YoutubeEmbed from '../video/video';
import api from "../../api"
import { useHistory, Link } from "react-router-dom";
import semanime from "../../img/semanime.jpeg"



const CardAnime = (props) => {


    const [modal, setModal] = useState(false);
    const [modalLista, setModalLista] = useState(false);
    const [generos, setGeneros] = useState([" "," "," "]);
    const [idanime, setIdanime] = useState("");
    const [lista, setLista] = useState(false)

    const { anime, noanime, openlista, login, className } = props
    const token = localStorage.getItem('TOKEN')
    const userid = localStorage.getItem('ID')
    const history = useHistory();

    const toggle = () => setModal(!modal);
    const modlista = () => setModalLista(!modalLista);

    if(anime){
        setGeneros(anime.genero.split(","));
        if (generos.length > 3) {
            while (generos.length > 3) {
              generos.pop();
            }
          }
    }

    return (
        <div>
            <Card className="space">
                <CardImg top width="100%" className="img" src={anime.imagem} alt="Card image cap" />
                <CardBody>
                    <CardTitle tag="h5" >{anime.nome}</CardTitle>
                    <CardSubtitle tag="h6" className="mb-2 text-muted">
                        {
                            noanime ? "" :
                                generos.map((genero, index) => {
                                    return <Badge key={index} href="#" color="light">{genero}</Badge>
                                })
                        }
                    </CardSubtitle>
                    <CardText>
                        <ListGroup id={noanime ? "off" : "on"}>
                            <ListGroupItem> <strong>Episódios: </strong> {anime.num_ep} </ListGroupItem>
                            <ListGroupItem> <strong>Status: </strong> {anime.status} </ListGroupItem>
                        </ListGroup>
                    </CardText>
                    <Button color="success" id={noanime ? "off" : "on"} size="lg" onClick={openlista ? modlista : toggle} block>Ver</Button>
                </CardBody>
            </Card>

            <Modal isOpen={modal} toggle={toggle} className={className}>
                <ModalHeader toggle={toggle}>{anime.nome}</ModalHeader>
                <ModalBody>
                    <YoutubeEmbed embedId={anime.trailer} />
                    <hr />
                    <ListGroup>
                        <ListGroupItem> <strong>Generos: </strong> {anime.genero} </ListGroupItem>
                        <ListGroupItem> <strong>Episódios: </strong> {anime.num_ep} </ListGroupItem>
                        <ListGroupItem> <strong>Status: </strong> {anime.status} </ListGroupItem>
                    </ListGroup>
                </ModalBody>
                <ModalFooter >
                    <div className="div">
                        <a id={login ? "off" : "on"} href="/login">Faça login para adicionar em listas</a>{' '}
                        <Button color="success" id={login ? "on" : "off"} onClick={() => { setIdanime(anime._id); setLista("assistir") }} >Assistir</Button>
                        <Button color="success" id={login ? "on" : "off"} onClick={() => { setIdanime(anime._id); setLista("assistidos") }} >Assistidos</Button>
                        <Button color="danger" onClick={toggle}>Fechar</Button>
                    </div>
                </ModalFooter>
            </Modal>
            <Modal isOpen={modalLista} toggle={modlista} className={className}>
                <ModalHeader toggle={modlista}>{anime.nome}</ModalHeader>
                <ModalBody>
                    <YoutubeEmbed embedId={anime.trailer} />
                    <hr />
                    <ListGroup>
                        <ListGroupItem> <strong>Generos: </strong> {anime.genero} </ListGroupItem>
                        <ListGroupItem> <strong>Episódios: </strong> {anime.num_ep} </ListGroupItem>
                        <ListGroupItem> <strong>Status: </strong> {anime.status} </ListGroupItem>
                    </ListGroup>
                </ModalBody>
                <ModalFooter >
                    <div className="div">
                        <Button color="success" id="on" onClick={() => { setIdanime(anime._id); setLista("assistidos") }} >Assistidos</Button>
                        <Button color="danger" onClick={() => {
                        }}>Excluir</Button>
                    </div>
                </ModalFooter>
            </Modal>
        </div>
    );
};

export default CardAnime;
0

1 Resposta 1

3

Acredito que seu problema esteja nesse trecho do componente CardAnime.

if(anime){
    setGeneros(anime.genero.split(","));
    if (generos.length > 3) {
        while (generos.length > 3) {
          generos.pop();
        }
      }
}

Assim que você invoca o método setGeneros essa alteração de estado acaba gerando a re-renderização do seu componente, que por sua vez executa o setGeneros novamente entrando em loop.

Sugiro que você coloque esse trecho dentro de um useEffect.

useEffect(() => {
if(anime){
    setGeneros(anime.genero.split(","));
    if (generos.length > 3) {
        while (generos.length > 3) {
          generos.pop();
        }
      }
}
}, [anime])

Isso ja deve bastar, para resolver o loop em seu código.

Outro ponto de atenção no seu código é este trecho:

if (generos.length > 3) {
        while (generos.length > 3) {
          generos.pop();
        }
      }

A função pop remove o ultimo item do seu estado de generos, entretanto o pop esta mutando o objeto diretamente, é possível que você tenha problemas no futuro por mutar um estado dessa forma.

Acredito que seu objetivo é apresentar somente os três primeiros gêneros, sendo assim sugiro que você primeiro faça a verificação necessária e caso realmente exista mais que três elementos podemos utilizar a função slice para gerar um novo array somente com os três primeiros valores.

useEffect(() => {
if(anime){
    const gen = anime.genero.split(",")
    if(generos.length > 3) setGeneros(gen.slice(0, 3));
    else setGeneros(gen)
}
}, [anime])
3
  • Fiz as alterações no código e resolveu até agora não apresentou mais o erro, obrigado pela dica do gêneros
    – ronaldo
    5/05/2021 às 20:48
  • Uma correção: a dependência do useEffect deve ser anime por causa do if (anime). Inclusive, pelo if assumo que anime pode ser undefined ou null, nesse caso utilizar anime.genero na dependência causaria uma exceção. 15/06/2021 às 23:29
  • Tem razão Rafael, não me liguei nesse detalhe, editei a resposta corrigindo a dependência do useEffect, muito obrigado. 16/06/2021 às 12:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .