Componente carrega as informações do servidor sem está sendo chamado - resolvido

Front-end
#1

No meu menu, tem <PregaoIniciar open={open} fecharPregao={fecharIniciarPregao} />, assim toda vez que ele inicia o sistema ele carrega o componente e vai no backend.

Mas eu preciso que isso ocorra só quando o usuário clicar no menu neste componente.

import {
    AppBar,
    Button,
    Dialog,
    DialogActions,
    FormControl,
    InputLabel,
    MenuItem,
    Select
} from '@material-ui/core';

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import './PregaoIniciar.scss';
import { todosAtivosPorEmpresa } from './PregaoIniciarAcoes';

class PregaoIniciar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            iniciar: props.open,
            licitacao: 0
        }
    }

    componentWillMount() {
        this.props.todosAtivosPorEmpresa()
    }

    clickNao() {
        console.log('clickNao')
        console.log(this.state.licitacao)
        this.setState({
            iniciar: false,
            licitacao: ''
        })
        this.props.fecharPregao();
    }

    clickSim() {
        console.log('clickSim')
        console.log(this.state.licitacao)
        this.setState({
            iniciar: false
        })
        this.props.fecharPregao();
    }

    handleChange = (event) => {
        this.setState({
            licitacao: event.target.value
        })
    };

    preenchimentoLicitacao = () => {
        const licitacoes = this.props.listaLicitacao || [];
        return licitacoes.map(licitacao => (
            <MenuItem key={licitacao.id} value={licitacao.id}>{licitacao.numeroAno}</MenuItem>
        ))
    }

    render(){
        return (
            <>
                <Dialog
                    open={this.props.open}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                <AppBar position="static" className="AppBarPregaoIniciar">
                    <div className="divAppBar">
                        <span className="spanNomeSistema">Pregão Presencial</span>
                        <span className="spanNomeTela">Iniciar Pregão</span>
                    </div>
                </AppBar>
                <div className="divPergunta">Deseja iniciar a licitação para pregão ?</div>
                <FormControl variant="outlined" className="escolhaLicitacao">
                    <InputLabel id="demo-simple-select-outlined-label">Licitação</InputLabel>
                    <Select
                        label="Licitação"
                        value={this.state.licitacao}
                        onChange={this.handleChange}
                    >
                        <MenuItem value=""><em>Nenhum</em></MenuItem>
                        { this.preenchimentoLicitacao() }
                    </Select>
                </FormControl>
                <DialogActions>
                    <Button onClick={() => this.clickNao()}  color="primary">
                        Não
                    </Button>
                    <Button onClick={() => this.clickSim()} color="primary" autoFocus>
                        Sim
                    </Button>
                    </DialogActions>
                </Dialog>
            </>
        )
    }
}

PregaoIniciar.propTypes = {
    open: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({listaLicitacao: state.pregaoInicial.licitacoes})
const mapDispatchToProps = dispatch => 
    bindActionCreators({todosAtivosPorEmpresa}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(PregaoIniciar)

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.

#2

esse seu problema esta acontecendo, porque quando voce monta o componente, voce esta chamando a sua action do redux, que carrega as licitações.
tem que remover esse seu componentDidMount() e chamar a action dentro do metodo que vc trata o click e muda o open para true.

1 curtida
Componente classe e Componente funcional sem estado - resolvido
#3

No componete com classe fiz assim:

onFocus={this.preencher}

preencher = () => {
        this.props.todosAtivosPorEmpresa()
}

e tiriei

componentWillMount() {
     this.props.todosAtivosPorEmpresa()
}

Seria o mais correto ?

#4

pode ser assim mesmo. ou no onClick do botao que voce usa para abrir o dialog

#5

Assim é melhor, que fica tudo no componente. Porque se precisar depois de colocar o componente em outro lugar, eu não preciso colocar a ação lá de novo