Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Chamar métodos React

Bom dia, Estou com uma duvida de como chamar uma função e fazer com que ela renderize um gráfico por exemplo:

Tenho essa validação que pega a resolução do usuário, caso se encaixar no if (Renderiza apenas em Desktop) ele ira fazer a requisição para a API e renderizar o gráfico.

    renderizagrafico = () =>{
        var w = window.innerWidth;
        var h = window.innerHeight;
        if (h >= 1280 || w >= 720) {
            console.log("chama Grafico");
            axios.get(sessionStorage.server + "/getexemplo?usuario=" + Number(sessionStorage.usuario) + "&senha=" + sessionStorage.senha)
                .then(
                    (result) => {
                        this.setState(result.data);
                        if (this.state.status === 0) {
                            this.setState({ notasMes: '' });
                        }
                    }
                );
            return (
                <Chart type="bar" data={this.state.notasMes}></Chart>
            );
        }
    }

*Esse if esta dentro de um método renderizagrafico( )

Estou chamando esse método la em baixo onde pretendo renderizar o gráfico

  <div /*d-none d-lg-block*/ className="col-xl-6">
                        {this.renderizagrafico()}
   </div>

Se deixar dessa maneira como esta funciona, porem com a requisição axios dentro do método ele fica fazendo a requisição a todo milésimo renderizando o grafico.

Então retirei o ( ) do renderizagrafico ficando:

  <div /*d-none d-lg-block*/ className="col-xl-6">
                        {this.renderizagrafico}
   </div>

Assim é como a documentação orienta para não chamar o método na declaração, porem com isso ele não renderiza nenhuma vez, oque é esperado pois o método não esta sendo chamado.

Não tenho ideia de como fazer para chamar a função e depois da validação se SIM renderizar o gráfico onde eu quero.

1 resposta
solução!

Você poderia fazer no componentDidMountuma chamada pra API que atualiza o estado e o gráfico consulta diretamente o estado. E poderia fazer um botão que atualiza o gráfico fazendo uma chamada na API novamente, isso diminuiria o numero de requests.

Espero ter ajudado :)