Im begginer with React and facing a problem of undefined. So here im having my context file with useEffect function that fetches data from "data.json" file. Inside im also returning a new array with key-value pairs and updating state with the array. So if i want to console.log a state it shows me an array filled with key-value pairs i mentioned above. But when i want to console.log for example first index of the array (state) with the e.g. "name" key it does not know what is "name". Any suggestions? Im attaching a context file and data.json file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import { useState, useEffect } from "react";
export const Context = React.createContext({
planet: true,
onChooseMoon: () => {},
onChooseMars: () => {},
});
const ContextProvider = (props) => {
const [planet, setPlanets] = useState(true);
useEffect(() => {
fetch("./data.json")
.then((response) => {
return response.json();
})
.then((data) => {
const transformedData = data.destinations.map((destination) => {
return {
name: destination.name,
img: destination.images.png,
desc: destination.description,
dist: destination.distance,
travel: destination.travel,
};
});
setPlanets(transformedData);
});
}, []);
console.log(planet[0]);
console.log(planet[0].name);
const setMoonHandler = () => {
return {
name: planet[0].name,
img: planet[0].img,
desc: planet[0].description,
dist: planet[0].distance,
travel: planet[0].travel,
};
};
const setMarsHandler = () => {
return {
name: planet[1].name,
img: planet[1].img,
desc: planet[1].description,
dist: planet[1].distance,
travel: planet[1].travel,
};
};
return (
<Context.Provider
value={{
planet: planet,
onChooseMoon: setMoonHandler,
onChooseMars: setMarsHandler,
}}
>
{props.children}
</Context.Provider>
);
};
export default ContextProvider;{
"destinations": [
{
"name": "Moon",
"images": {
"png": "../assets/destination/image-moon.png",
"webp": "./assets/destination/image-moon.webp"
},
"description": "See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.",
"distance": "384,400 km",
"travel": "3 days"
},
{
"name": "Mars",
"images": {
"png": "./assets/destination/image-mars.png",
"webp": "./assets/destination/image-mars.webp"
},
"description": "Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!",
"distance": "225 mil. km",
"travel": "9 months"
},
{
"name": "Europa",
"images": {
"png": "./assets/destination/image-europa.png",
"webp": "./assets/destination/image-europa.webp"
},
"description": "The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.",
"distance": "628 mil. km",
"travel": "3 years"
},
{
"name": "Titan",
"images": {
"png": "./assets/destination/image-titan.png",
"webp": "./assets/destination/image-titan.webp"
},
"description": "The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.",
"distance": "1.6 bil. km",
"travel": "7 years"
}
],
"crew": [
{
"name": "Douglas Hurley",
"images": {
"png": "./assets/crew/image-douglas-hurley.png",
"webp": "./assets/crew/image-douglas-hurley.webp"
},
"role": "Commander",
"bio": "Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2."
},
{
"name": "Mark Shuttleworth",
"images": {
"png": "./assets/crew/image-mark-shuttleworth.png",
"webp": "./assets/crew/image-mark-shuttleworth.webp"
},
"role": "Mission Specialist",
"bio": "Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist."
},
{
"name": "Victor Glover",
"images": {
"png": "./assets/crew/image-victor-glover.png",
"webp": "./assets/crew/image-victor-glover.webp"
},
"role": "Pilot",
"bio": "Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer."
},
{
"name": "Anousheh Ansari",
"images": {
"png": "./assets/crew/image-anousheh-ansari.png",
"webp": "./assets/crew/image-anousheh-ansari.webp"
},
"role": "Flight Engineer",
"bio": "Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space."
}
],
"technology": [
{
"name": "Launch vehicle",
"images": {
"portrait": "./assets/technology/image-launch-vehicle-portrait.jpg",
"landscape": "./assets/technology/image-launch-vehicle-landscape.jpg"
},
"description": "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!"
},
{
"name": "Spaceport",
"images": {
"portrait": "./assets/technology/image-spaceport-portrait.jpg",
"landscape": "./assets/technology/image-spaceport-landscape.jpg"
},
"description": "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch."
},
{
"name": "Space capsule",
"images": {
"portrait": "./assets/technology/image-space-capsule-portrait.jpg",
"landscape": "./assets/technology/image-space-capsule-landscape.jpg"
},
"description": "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained."
}
]
}import Header from "../components/Header/Header";
import Planets from "../components/Planets/Planets";
import styles from "./Destination.module.css";
import ChoosePlanet from "../components/Planets/ChoosePlanet";
import { useContext } from "react";
import { Context } from "../store/context";
const Destination = () => {
const ctx = useContext(Context);
console.log(ctx.planet); //shows an array that was created after fetching
console.log(ctx.planet[0].name); // does not know what is index 0
console.log(ctx.planet.name); // does not know what is name
return (
<div className={styles.body}>
<Header />
<h2>
<span>01</span>PICK YOUR DESTINATION
</h2>
<main className={styles.main}>
{ctx.planet && <Planets img={ctx.planet.img} alt="planet" />}
<ChoosePlanet
name={ctx.planet.name}
text={ctx.planet.desc}
distance={ctx.planet.dist}
time={ctx.planet.travel}
/>
</main>
</div>
);
};
export default Destination;CodePudding user response：
useEffect doesn't run until after the first render, so on the first render, your planet variable is still the value that you used to initialize it (true).
Try the following approach instead: Leave the initial value of planet as undefined:
// no value is the same as `undefined` when invoking a function
const [planet, setPlanets] = useState();
Then, any time you use planet in your code, first check to make sure it's not undefined before attempting to use it / access its properties:
if (planet) {
// planet is not `undefined`
console.log(planet[0]); // ok
}
else {
// planet is falsy, so do something else
}