• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

197
Vistas
useEffect runs only once and after refresh it does not fetch again

I have this component that fetches data from a site, and tries to get its keys.
The problem is that it works fine at the first time, but when I refresh the page / save the project in VSCode (and the project refreshes automatically) it shows this error message:

TypeError: Cannot convert undefined or null to object
  14 |    )
  15 | 
  16 |    return (
> 17 |        <div className="rates">
     | ^  18 |            {Object.keys(rates.rates).map(
  19 |                rate => <Button variant="outlined">
  20 |                    {rate}

The code (the specific component):

import React, { useState, useEffect } from 'react'
import Button from '@mui/material/Button';


const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])

    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )
    }
    

export default RatesCard

I have no idea why it works the first time and then it doesn't. My guess is that the useEffect hook runs only once because of the [] dependency, and then when we refresh it says "Nothing changed, so I won't run the function" Thus we don't fetch anything, and thus rates is undefined...

I have no clue why it does this, I can only guess. I will appreciate your kind help! Thank you!

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

useEffect runs after your component is mounted which means rates is just an empty array that doesn't have a property called rates

Object.keys(rates.rates)

try to use

const [rates, setRates] = useState({rates:[]});

or make a loading indicator for example

const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])


    if(rates.length === 0) {
        return <h1> loading </hi>
     }
    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Your default value for rates should be an empty object with rates property set to an empty array ({rates: []}).

By saying the following Object.keys(rates.rates).map you're going with the assumption that the rates will be an object, and rates.rates will be an array.

It works the "first" time due to how hot reloading works, because when you save your files, it injects codes to the browser and not remounting the entire app. Thus, your app will continue from where it left off before, even if it crashed on the previous load..

Change your state definition to the following: const [rates, setRates] = useState({rates:[]});

This will ensure when your app tries to run Object.keys(rates.rates).map it doesn't crash because you have an array to iterate not null/undefined

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda