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!
CodePudding user response:
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
CodePudding user response:
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>
)
CodePudding user response:
First, your state is equal to []
in the first render you're trying to do the following: Object.keys([].rates)
and obviously here rates
doesn't exist on the Array
it ends up doing Object.keys(undefined)
which results to the error.
So the solution to me is instead of setting the whole object to rates
you can just set the rates object of the response by destructuring (cf. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring):
useEffect(() => {
fetch('https://api.vatcomply.com/rates')
.then((ratesResponse) => ratesResponse.json())
.then(({ rates }) => setRates(rates));
}, []);