Tengo una función en react que me devuelve un código JSX en el que tengo un <StarRating>
(https://www.npmjs.com/package/react-star-rating-component) cuyo valor (estrellas no vacías) es el resultado de una llamada a la API que me devuelve la puntuación en estrellas de todos los usuarios y me calcula la media. Adjunto el código:
import React, {useState} from "react";
import {useTranslation} from "react-i18next";
import Grid from "@material-ui/core/Grid";
import {NavLink} from "react-router-dom";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import StarRatings from 'react-star-ratings';
import axios from "axios";
import Global from "../Global";
export const RatingSlider = ({showAllCallback}) => {
let avg = 0;
let averageRate = [];
const [t] = useTranslation("global")
const [allRates, setAllRates] = useState(0);
function checkRating() {
axios.get(Global.url + "/rates").then(res => {
setAllRates(res.data.rates)
})
for (let i = 0; i < allRates.length; ++i) {
averageRate.push(allRates[i].rate)
}
if (averageRate.length > 1) {
let sum = averageRate.reduce((a, b) => a + b, 0);
avg = sum / averageRate.length;
}
return avg
}
return (
<div id="slider">
<div className="sliderContent">
<div className="rating">
<StarRatings
rating={checkRating()}
starRatedColor="#FCCF00"
numberOfStars={5}
starDimension="100px"
/>
</div>
/*CODIGO IRRELEVANTE*/
</div>
</div>
);
}
El código funciona y el resultado es el correcto, pero me encuentro con el problema de que la llamada a la API se ejecuta constantemente. He probado useEffect y tirar de una variable global booleana pero no logro que funcione y me imagino que tendrá relación con que la petición tarda más que en mostrarse la pantalla por lo que en realidad no me sirve que se ejecute una sola vez, si no que se ejecute hasta que la petición a la API se complete y avg
sea distinto de 0. ¿Alguna idea?
Edit: Y no puedo utilizar una clase que extienda de Component por razones que se encuentran en el código irrelevante.
useEffect
para solicitar datos de API's, ahora por lo que mencionas de que quieres solo ejecutar cuandoavg
cambie parece un problema de dependencias, ¿Podrías modificar el código, mostrando lo que has intentado conuseEffect
? saludos