Componente classe e Componente funcional sem estado - resolvido

Front-end
#1

Antes o componente foi criado assim, pelo que entendi ele é Componente funcional sem estado,
const PregaoIniciar = props => {

Pelo que li e vi em cursos, para que o componente acionar o backend ao iniciar eu devo mudar ele para Classe e extender do component.
class PregaoIniciar extends Component

Esta é a unica maneira ?

#2

nao. voce pode usar o react hook useEffect().
a sintaxe dele é
useEffect(() => {}, []);
entre as chaves vai sua funcao para carregar os dados da api, e no colchete vai o campo que voce deseja monitorar o valor, para caso ele seja alterado, disparar a funcao. Mas na pratica se o componente for somente stateless, voce passa os dados par ele mostrar via props.

import React, { useState, useEffect } from 'react';
import api from '../services/api';
import ContentHeader from './common/template/contentHeader';
import Content from './common/template/content';
import moment from 'moment'

export default function ListagemAniversariantes() {
    const [assistidos, setAssistidos] = useState([]);
    const [mes, setMes] = useState(0);

    useEffect(() => {
        async function loadAssistidos() {
            const response = await api.get(`/aniversariantes?mes=${mes}`);
            setAssistidos(response.data);
        }
        loadAssistidos();
        return () => setAssistidos([])
    }, [mes]);

    return (
        <div>
            <ContentHeader title="Assistido" small="aniversariantes" />
            <Content>
                <form>
                    <div className="row">
                        <div className="form-group col-sm-2">
                            <label className="control-label" htmlFor="mes">Mes</label>
                            <select id="mes" className="form-control"
                                value={mes}
                                onChange={e => setMes(e.target.value)} >
                                <option value="0">Selecione um mês</option>
                                <option value="1">JANEIRO</option>
                                <option value="2">FEVEREIRO</option>
                                <option value="3">MARÇO</option>
                                <option value="4">ABRIL</option>
                                <option value="5">MAIO</option>
                                <option value="6">JUNHO</option>
                                <option value="7">JULHO</option>
                                <option value="8">AGOSTO</option>
                                <option value="9">SETEMBRO</option>
                                <option value="10">OUTUBRO</option>
                                <option value="11">NOVEMBRO</option>
                                <option value="12">DEZEMBRO</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div className="table-responsive">
                    <table className="table table-stripped">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Data Nascimento</th>
                                <th>Idade</th>
                                <th>Ponto</th>
                            </tr>
                        </thead>
                        <tbody>
                            {assistidos.map(usuario => (
                                <tr key={usuario.id}>
                                    <td>{usuario.nome}</td>
                                    <td>{moment(usuario.dataNascimento).format("DD/MM/YYYY")}</td>
                                    <td>{(moment(usuario.dataNascimento, "YYYYMMDD").fromNow().split(' '))[0]} anos</td>
                                    <td>{usuario.ponto.nome}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </Content>
        </div>
    )
}
#3

Mas o correto é usar o componente como classe neste caso então ?

#4

o react comecou como classe, depois nas ultimas versoes eles tem suporte a componentes funcionais, sem a necessidade de extender React.Component, isso trouxe vantagens e com o surgimento dos Hooks, ficou mais facil e simples utilizar funcionalidades como redux, por exemplo.

Voce pode usar os dois sem problemas. Mas usar tudo como funcao, é melhor.

1 curtida
#5

Certo vou ajustar aqui.

valeu

#6

Funcionou também.

Mas independente se o componente está como classe ou como Componente funcional sem estado. o componente envia a requisição para o banco de dados sem que eu chame o componente.

Tipo ele deve executar o backend, quando for clicado no menu do dialog.

#7

nesse caso, voce precisa no evento do click para abrir o componente, vc ter uma funcao que chama a api, ou se for um componente funcional, voce usar um

useState(()=>{},[com esse colchete vazio])

assim a api so executa uma vez, e quando o componente for renderizado. esse metodo nao funciona em componente de classe.
nesse componente voce um o componentDidMount()

1 curtida
#8

Este tópico foi resolvido.

Vou deicar para o outro tópico, a questão de componente chamar o back end ao clicar.