0

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

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

我还需要父组件中的数据，所以我把数据放在 fetchedData 状态钩子中，并返回它。因此，如果我控制台记录来自函数的数据，则在父组件内部。我得到[object Object]。如果我这样做maindData.dataor mainData.data.page，我会收到一条错误消息，指出无法访问未定义的数据或页面，这与至少我获得该属性的前一种情况不同。

此错误的原因可能是什么？是因为反应钩子总是返回一个数组而不是一个对象吗？如果是这样，那么解决方案可能是什么？

父组件

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

子函数

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;
};

来自 TMDB API 的 JSON 数据

{
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
}
4

3 回答 3

1

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

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

那么我将不得不为每个更深的对象键添加 if 语句，即

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

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

于 2020-06-23T16:53:56.230 回答
0

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

User[0].name
于 2021-11-15T06:54:22.920 回答
0

您以错误的方式设置数据

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

应该

setFetchedData({ mainData:response.data ,loading: false, status:response.status });
于 2020-04-06T20:37:48.870 回答