Невозможно получить доступ к свойствам объекта извлеченных данных Json с помощью ловушек React - PullRequest
Новая
       27

Невозможно получить доступ к свойствам объекта извлеченных данных Json с помощью ловушек React

0 голосов
/ 06 апреля 2020

Я не могу получить доступ к свойствам объекта data в родительском компоненте

После того, как я получаю данные из API в дочерней функции, я получить json данные. В рамках обещания .then, если я утешу журнал ответом, я получу [объект] . Если я консоль журнала response.page или response.results[1].title, я получаю ожидаемое свойство объекта, но журнал response.results дает [объект объекта] [объект объекта] .

Также мне нужны данные в родительском компоненте, поэтому я поместил эти данные в обработчик состояния fetchedData и вернул их. Таким образом, внутри родительского компонента, если я консоль журнала данных из функции. Я получаю как [объект объекта] . И если я делаю maindData.data или 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;
};

JSON данные из 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
}

1 Ответ

0 голосов
/ 06 апреля 2020

Вы устанавливаете данные неправильно 

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

должно быть 

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