1

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.

6
  • 1
    El patrón más común es usar useEffect para solicitar datos de API's, ahora por lo que mencionas de que quieres solo ejecutar cuando avg cambie parece un problema de dependencias, ¿Podrías modificar el código, mostrando lo que has intentado con useEffect? saludos
    – g.4
    Commented el 14 abr. 2021 a las 16:18
  • No se te entiende mucho pero la liberia misma usa estados, create una variable rating por ej: con useState. Has un componentDidmount con useeffect y ahi cambias el estado de rating , asi renderizara el rating con el nuevo valor. Para que algo se renderize de nuevo se necesita usar estados, la liberia misma es clara con sus ejemplos usa estados, pero en un clase component. solo cambialo a como seria en un componente funcional
    – OsAndNoTi
    Commented el 14 abr. 2021 a las 18:19
  • 1
    Creo que estás enredado con la documentación, ya ví que tú estas leyendo la documentación de StarRatingComponent, sin embargo estás usando StarRating Commented el 14 abr. 2021 a las 18:29
  • @Eduardo me equivoqué con el enlace de la documentación, pero el componente que utilice para las estrellas es lo de menos en este código Commented el 15 abr. 2021 a las 7:36
  • @OsAndNoTi soy bastante nuevo en React pero hasta donde yo se no puedo usar n componentDidMount en una función. Podría si fuera una class extendida de Component, pero no es el caso. Saludos Commented el 15 abr. 2021 a las 7:37

1 respuesta 1

1

Un componente de React tiene 'fases' por las que se mueve para renderizarse, en resumen son 3, una mientras se monta (primera vez que se renderiza), una que avisa que tiene que re-renderizarse (cuando cambia un prop después de estar montado o cuando cambia el valor de un useState()) y finalmente cuando se desmonta (ya no tiene que renderizarse pues cambió la página, etc).

Tu código tenía problemas pues la llamada a la api estaba dentro de tu función checkRating que se ejecutaba cada vez que trataba de renderizar <StarRating .../>, por lo que luego cambiaba el valor de allRates usando setAllRates lo que gatillaba un re-renderizado ('etapa 2'), luego al re-renderizarse llamaba denuevo la función y así hasta el infinito, ejecutando infinitas veces la llamada a la api

Aquí es cuando useEffect es útil pues al entregarle un arreglo vacío (useEffect(() => {...}, [])) este sólo se ejecutará en la primera 'fase', es decir, cuando se monta.

Acá está refactorizado para como yo lo haría, agregué unas cosas chicas como un state con un booleano para saber cuando está cargando la api, de esa manera puedes renderizar algo mientras esperas la respuesta de la api.

import React, {useState, useEffect} 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}) => {
    const [t] = useTranslation("global")
    const [allRates, setAllRates] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(true);
        axios.get(Global.url + "/rates").then(res => {
            setAllRates(res.data.rates)
            setLoading(false)
        });
    }, [])


    function getAverage() {
        let sum = 0
        if(allRates.length === 0) return 0
        for (let i = 0; i < allRates.length; ++i) {
            sum += allRates[i].rate
        }
        return sum / allRates.length
    }
    return (
        <div id="slider">
            <div className="sliderContent">
                <div className="rating">
                    {loading ? '...' : (
                        <StarRatings
                            rating={getAverage()}
                            starRatedColor="#FCCF00"
                            numberOfStars={5}
                            starDimension="100px"
                        />
                    )}
                </div>

                /*CODIGO IRRELEVANTE*/
             </div>
        </div>
    );
}

Espero te sirva!

1
  • Me ha servido y mucho! Muchísimas gracias por la ayuda y por hacerme entender qué estaba haciendo mal. Commented el 15 abr. 2021 a las 7:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.