0

To comum um problema de loop no react, que ta fazendo basicamente centenas de chamas as minhas apis.

O componente em sim aparentemente não esta dentro do loop,a unica coisa que fica atualizando infinitamente são as chamas a api.

componente:

    import React, { useState, useMemo } from 'react';
import axios from 'axios';
import Header from "../../componentes/header";
import Footer from "../../componentes/footer";
import Upload from '../../componentes/Upload';
import AddCategory from "./addCategory";
import "./style.css";

import camera from "../../assets/camera.svg";

const user_id = localStorage.getItem('user_id');

export default function Galeria() {

    const [uploadDisplay, setUploadDisplay] = useState(false);
    const [categoryDisplay, setCategoryDisplay] = useState(false);

    const [listCategory, setListCategory] = useState([])

    const [images, setImages] = useState([]);



    useMemo(async () => {
        try {
            const response = await axios.get(`http://localhost:3001/api/image/${user_id}`);
            console.log(response)

            setImages(response.data);
        } catch (error) {
            console.log(error)
        }

        try {
            const response = await axios.get(`http://localhost:3001/api/category/${user_id}`);

            if (response.data.category === null) {
                setListCategory(['none']);
            } else {
                setListCategory(response.data.category);
            }

        } catch (error) {
            // Tratar erro
            console.log({ error })
        }
    })







    return (
        <>
            <Header />
            <div className="container-galeria">
                <header className="header-galeria">
                    <div className="header-title">
                        <h1 className="title">Galeria</h1>
                    </div>

                    <div className="header-upload">
                        <button className="btn-upload" onClick={event => setUploadDisplay(true)}> Adicionar imagem <img src={camera} alt="" /></button>
                    </div>

                    <div className="header-category">
                        <select className="btn-category">
                            <option value="">Categorias</option>
                            {listCategory ? listCategory.map((item, i) => (
                                <option key={i}>{item}</option>
                            )) : ''}
                        </select>
                    </div>

                    <div className="header-add-category">
                        <button className="btn-add-category" onClick={event => setCategoryDisplay(true)}>
                            +
                        </button>
                    </div>

                </header>

                <main className="main-galeria">
                    <ul>

                        {images ? images.map((item, i) => (

                            <li className="card-image" key={item._id}>
                                <div className="card-header">
                                    <img src={item.link} alt="" className="card-img" />
                                </div>
                                <div className="card-main">
                                    <div className="description"></div>
                                </div>
                            </li>
                        )) : 'Sem imagens no momento!'}


                    </ul>
                </main>
            </div>

            <AddCategory display={categoryDisplay} onClose={event => setCategoryDisplay(false)} />
            <Upload display={uploadDisplay} onClose={event => setUploadDisplay(false)} />
            <Footer />
        </>
    )
}
1
  • Tá faltando você dizer qual estado que vai ser assistido pelo useMemo, não? 21/10/2019 às 11:49

1 Resposta 1

2

O problema é que você está utilizando o useMemo com apenas um parâmetro, isso ocasionará dele executar toda vez que o componente for renderizado, para resolver esse problema você deve definir a variável que vai ser assistida da seguinte forma:

useMemo(() => {}, [variavelAssistida]);

Caso você queira que execute só quando o componente for montado, você deve, então, utilizar o useMemo da seguinte forma:

useMemo(() => {}, []);
1
  • 1
    Obrigado, no momento funcionou o estranho é que já tinha testado isso uma vez e não tinha funcionado kk. 21/10/2019 às 15:15

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 .