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.