1

Implementé una conexión en React.js con www.Steinhq.com para conectarme a un sheet y gestionar el contenido de la web desde el sheet. Todo funciona correcto, puedo traer los datos desde el sheet e impregnar la web con esos datos, el problema es que sigue llamando hasta saturar y no sé cómo frenar las llamadas. Este es el error que recibo por consola:

commons.js:132825 Uncaught (in promise) 
Error: Quota exceeded for quota metric 'Read requests' and limit 'Read 
requests per minute per user' of service 'sheets.googleapis.com' for 
consumer 'project_number:1048824810194'.
at commons.js:132825:19

Este es mi código:

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Container, Row, Col } from "react-bootstrap";
import Hero2 from "../../sections/landing3/Hero";
import { Title, Section, Box, Text } from "../../components/Core";
import { device } from "../../utils";
import bgHeroPattern from "../../assets/image/webp/hero-pattern-2.webp";

const SectionStyled = styled(Section)`
  &::before {
    position: absolute;
    top: 0;
    content: "";
    width: 100%;
    height: 120%;
    background: url(${bgHeroPattern}) top center no-repeat;
    background-size: cover;
    z-index: -1;
  }
`;

const ImgRight = styled.img`
  max-width: 50%;
  @media ${device.sm} {
    max-width: 60%;
  }
  @media ${device.lg} {
    max-width: 100%;
  }
`;

const Hero = () => {
  const [APIstein, setAPIstein] = useState([]);
  const SteinStore = require("stein-js-client");

  useEffect(() => {
    const store = new SteinStore(
      "https://api.steinhq.com/v1/storages/632475e27bccea08c11815d4"
    );

    store.read("Sheet2", { limit: 1, offset: 0 }).then((incomingData) => {
      setAPIstein(incomingData);
    });
  });

  return (
    <>
      {/* <!-- Hero Area --> */}

      {APIstein.map((data) => {
        return (
          <SectionStyled hero className="position-relative">
            <Container>
              <Row className="align-items-center">
                <Col lg="5" md="8" sm="9">
                  <div className="text-center text-lg-right position-relative">
                    <div className="img-main">
                      <iframe
                        width="500"
                        height="281"
                        src={data.Video}
                        title="Nós somos a Escola Sorvete - Sorvete de Verdade"
                        frameborder="2"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen
                      ></iframe>
                    </div>
                  </div>
                </Col>
                <Col lg="7" className="mb-5 mb-lg-0">
                  <Box pl={[0, null, null, "3.125rem"]}>
                    <Text
                      color="dark"
                      css={`
                        line-height: 1.5;
                        text-align: center;
                      `}
                      mb="2.5rem"
                    >
                      {data.TextoArriba}
                      <br />
                    </Text>
                    <Title
                      mb="2rem"
                      css={`
                        font-size: 90px;
                        text-align: center;
                        line-height: 1em;
                      `}
                    >
                      {data.Titulo}
                    </Title>

                    <Text
                      color="dark"
                      css={`
                        line-height: 1.5;
                        text-align: center;
                      `}
                      mb="2.5rem"
                    >
                      {data.TextoAbajo}
                    </Text>
                  </Box>
                </Col>
              </Row>
            </Container>
            <Box py={4}>
              <Hero2 />
            </Box>
          </SectionStyled>
        );
      })}
    </>
  );
};

export default Hero;

Esta es una de las páginas de mi web, la misma consta de 4 secciones y en todas uso Steinhq para gestionar el contenido.

1
  • Hola, bienvenido a Stack Overflow en español. Recuerda realizar el recorrido de bienvenida y revisar Cómo preguntar. El código no debe ir como imagen, debe ir como texto. además si ves la imagen que pusiste, es practicamente ilegible (de ahi una de las razones para que también sea mejor ponerla como texto)
    – Pipe
    el 26 oct. 2022 a las 14:07

1 respuesta 1

1

El problema lo tenés en el hook useEffect, este necesita como segundo parámetro un array de dependencias que indique en qué momento debe ejecutarse la función que se pasa como primer parámetro. En tu caso, no le estás pasando ningún valor por lo que la llamada se realiza cada vez que el componente sufre un cambio. Para asegurarte que la función solo se ejecute una única vez (al momento que el componente se monta), deberías pasarle como segundo parámetro un array vacío []

 useEffect(() => {
    const store = new SteinStore(
      "https://api.steinhq.com/v1/storages/632475e27bccea08c11815d4"
    );

    store.read("Sheet2", { limit: 1, offset: 0 }).then((incomingData) => {
      setAPIstein(incomingData);
    });
  }, []);

Docs: https://reactjs.org/docs/hooks-effect.html

1
  • Clarooooo, esque estaba tan nublado que no me di cuneta de ese error, te agradezco muchisimo tu respuesta, muchas gracias. Solucionado! el 26 oct. 2022 a las 14:20

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.