0

Home.jsx


  useEffect(() => {
    fetch(
      `https://api.openweathermap.org/data/2.5/onecall?lat=11&lon=11&exclude=hourly,minutely&units=metric&appid=${process.env.REACT_APP_API_KEY}`
    )
      .then((res) => res.json())
      .then((data) => setData(data));
  });

  return (
    <div className="home">
      <DataContext.Provider value={{ data }}>
        <section className="main-section">
          <Navbar />
          <Toprow />
        </section>

        <section className="side-section">
          <Aside />
        </section>
      </DataContext.Provider>
    </div>
  );
}; ```


** top row component where i am using the data**

const { data } = useContext(DataContext);

and then consolelogging it giving this error

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Toprow.jsx:52 Uncaught TypeError: Cannot read properties of undefined (reading 'temp') at Toprow (Toprow.jsx:52:1)


check website at weatherflu-react.netlify.app
and i check this flow which i think says this thing better but i dont know what to do
https://stackoverflow.com/questions/72033780/flaky-errors-when-fetching-rendering-data-using-react-hooks
Improve this question
3
  • As you can see, the error is located in Toprow.jsx. But without seeing the file, it will be really difficult if not impossible to help you further. Commented Sep 5, 2022 at 8:34
  • Where are you accessing the temp property? Make sure that the object the property belongs to isn't undefined or something like that. Commented Sep 5, 2022 at 8:40
  • You might have an infinite loop in your useEffect. .then((data) => setData(data)); }, [] ); // Run this code only once. Your are fetching data, setting the state, and it rerenders and fetches data again, doing an infinite loop. dependancy array [] will run it only once Commented Sep 5, 2022 at 8:53
Related questions
1
I'm trying to fetch data from a server using useEffect react hook
54
Getting error after I put Async function in useEffect
1
How can I fetch data with useEffect in react
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.