无法使用 React 钩子访问获取的 Json 数据的 object 属性

Question

I can't access the data object properties in the parent component

After I fetch the data from the api in the child function, I receive a json data. Within the .then promise if I console log the response I get [object Object] . If I console log response.page or response.results[1].title I get the expected object property, but log of response.results gives [object Object] [object Object] .

Also I need the data in the parent component, so I put that data in fetchedData state hook, and returned it. So inside the parent component if I console log the data from the function. I get as [object Object] . And if I do maindData.data or mainData.data.page , I get an error saying data or page of undefined is not accessible unlike in the previous case where at least I was getting the property.

What could be the cause of this error? Is it because react hooks always returns an Array rather than an object? If so than what could be the solution for this??

---

Parent component

import React, {useEffect, useState} from 'react';
import axios from "axios"
import {useParams} from 'react-router-dom'
import TmdbApiUrl from "./apiUrl"
import {FetchUrl} from "./fetchUrl"
import "../assets/mediaList.sass"
import Navigation from "./partials/nav";
import MediaCard from "./partials/mediaCard";


const MediaList = ()=> {
   const {generalType} = useParams();
   const {media} = useParams();
   const {page} = useParams();
   const key=process.env.API_KEY;
   const url=`${TmdbApiUrl.baseURL()}${media}/${generalType}?api_key=${key}&page=${page}`;
   const {mainData,loading,status}=FetchUrl(url);

  console.log(`#loading==>${loading}`);
  console.log(`#FetchedData==>${mainData.data}`);
  console.log(`#status==>${status}`);

  return (
    <div className="mediaList">
      <Navigation />
      <div className="list m-5 d-flex flex-wrap justify-content-around">
        <MediaCard/>
        {/*{data.map(media=>(*/}
        {/*<div className="m-5">*/}
        {/*  <MediaCard*/}
        {/*      rating={true}*/}
        {/*      ratingValue={media.vote_average}*/}
        {/*      year={media.release_date}*/}
        {/*      title={media.title}*/}
        {/*      text={media.overview}/>*/}
        {/*</div>))}*/}
      </div>
    </div>
  );
};
export default MediaList

---

Child function

import {useEffect, useState} from 'react';
import axios from "axios";

export const FetchUrl=(url)=> {
  const [fetchedData,setFetchedData]=useState({mainData:null,loading:true,status:null});
  console.log(`url==>${url}`);
  useEffect(()=>{
    setFetchedData({mainData:null,loading:true,status:null});
    axios
      .get(url)
      .then(response=>{
        console.log(`response==> ${response}`);
        setFetchedData({mainData:response.data,loading: false,status:response.status});
        })
      .catch((error)=> console.log(`sorry for the ${error}`));
  },[url]);
  return fetchedData;
};

---

JSON data from TMDB API

{
data:{
  "page": 1,
  "total_results": 10000,
  "total_pages": 500,
  "results": [
    {
      "popularity": 564.69,
      "vote_count": 2822,
      "video": false,
      "poster_path": "/xBHvZcjRiWyobQ9kxBhO6B2dtRI.jpg",
      "id": 419704,
      "adult": false,
      "backdrop_path": "/5BwqwxMEjeFtdknRV792Svo0K1v.jpg",
      "original_language": "en",
      "original_title": "Ad Astra",
      "genre_ids": [
        18,
        878
      ],
      "title": "Ad Astra",
      "vote_average": 5.9,
      "overview": "(description..bla..bla..bla...)",
      "release_date": "2019-09-17"
    },
    {
      "popularity": 194.755,
      "vote_count": 12119,
      "video": false,
      "poster_path": "/5vHssUeVe25bMrof1HyaPyWgaP.jpg",
      "id": 245891,
      "adult": false,
      "backdrop_path": "/lvjRFFyNLdaMWIMYQvoebeO1JlF.jpg",
      "original_language": "en",
      "original_title": "John Wick",
      "genre_ids": [
        28,
        53
      ],
      "title": "John Wick",
      "vote_average": 7.2,
      "overview": "(description..bla..bla..bla...)",
      "release_date": "2014-10-22"
    }
  ]
},
  status:200
}

---

Answer 1

Found a solution but using redux. See if the json data fetched was huge ie deeply nested say for example

API object=A:{
             B:{ 
               C:{ 
                 D:E }
                 }
               }

then I would have had to put if statements for each of the deeper object keys ie

received data=A.B.(C?C:null).(D?D:null)

or else it would give me C or D as undefined and this is not an efficient solution. So then I used mapDispatchToProps & mapStateToProps from redux which dispatched the fetchAPI action and loaded the entire data before putting it into redux state.

Answer 2

You are setting data in wrong way

setFetchedData({data:{mainData:response.data},loading: false,status:response.status});

should be

setFetchedData({ mainData:response.data ,loading: false, status:response.status });

Answer 3

Select the position of the object in the array and then access the property. Eg:

User[0].name