无法使用 React 挂钩访问获取的 Json 数据的对象属性

Question

我无法访问父组件中的data对象属性

我从子函数中的 api 中获取数据后，我收到一个 json 数据。在 .then 承诺中，如果我控制台记录响应，我会得到 [object Object]。如果我控制台日志 response.page 或 response.results[1].title 我得到预期的对象属性，但是 response.results 的日志给出 [object Object] [对象对象].

我还需要父组件中的数据，所以我将这些数据放在 fetchedData 状态钩子中，然后将其返回。所以在父组件内部，如果我控制台记录来自函数的数据。我得到 [object Object]。如果我做 maindData.data 或 mainData.data.page，我会收到一条错误消息说 data or page of undefined is not accessible unlike在之前的案例中，至少我得到了属性.

导致此错误的原因可能是什么？是不是因为 react hooks 总是 returns 一个数组而不是一个对象？如果是这样，那么解决这个问题的方法是什么？？

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

您设置数据的方式有误

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

应该是

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

Answer 2

找到了解决方案，但使用的是 redux。如果获取的 json 数据很大，即深度嵌套，例如

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

那么我将不得不为每个更深层次的对象键放置 if 语句，即

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

否则它会给我 C 或 D 作为 undefined，这不是一个有效的解决方案。因此，我使用了 redux 中的 mapDispatchToProps & mapStateToProps，它调度了 fetchAPI 操作并在将其置于 redux 状态之前加载了整个数据。

Answer 3

Select对象在数组中的位置，然后访问属性。例如：

User[0].name

无法使用 React 挂钩访问获取的 Json 数据的对象属性

Cannot access object properties of fetched Json data with React hooks

javascript

object

reactjs

react-hooks

use-state