获取嵌套对象后映射数据

Question

大家好，我有组件主屏幕，我正在其中获取数据，我获取的数据包含一些内部有数组的对象，所以我想将所有数组和数据推送到我的状态 otherDetails 键中。我得到的数据看起来像这样

{
id: 5,
url: "http://www.tvmaze.com/shows/5/true-detective",
name: "True Detective",
type: "Scripted",
language: "English",
genres: [
"Drama",
"Crime",
"Thriller"
],
status: "To Be Determined",
runtime: 60,
premiered: "2014-01-12",
officialSite: "http://www.hbo.com/true-detective",
schedule: {
time: "21:00",
days: [
"Sunday"
]
},
rating: {
average: 8.2
},
weight: 97,
network: {
id: 8,
name: "HBO",
country: {
name: "United States",
code: "US",
timezone: "America/New_York"
}
},
webChannel: null,
externals: {
tvrage: 31369,
thetvdb: 270633,
imdb: "tt2356777"
},
image: {
medium: "http://static.tvmaze.com/uploads/images/medium_portrait/178/445621.jpg",
original: "http://static.tvmaze.com/uploads/images/original_untouched/178/445621.jpg"
},
summary: "<p>Touch darkness and darkness touches you back. <b>True Detective</b> centers on troubled cops and the investigations that drive them to the edge. Each season features a new cast and a new case.</p>",

现在我想在主屏幕内做什么我有我的状态与对象键 otherDetails 我正在尝试获取流派语言网络时间表和摘要所以我不确定发生了什么错误这是我的 HomeScreen.js

import React, {Component} from 'react';
const axios = require('axios');
import Card from '../Components/Card/card';
import {
  View,
  Text,
  Button,
  Image,
  ScrollView,
  ActivityIndicator,
} from 'react-native';
import DetailsScreen from './detailsScreen';
import DetailedCard from '../Components/DetailedCard/DetailedCard';
export default class HomeScreen extends React.Component {
  state = {
    title: [],
    image: [],
    rating: [],
    otherDetails:[{
      genres:[],
      schedule:[],
      language:'',
      network:[],
      summary:'',
  }  ],
    isLoading: true,
  };

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    const requestUrls = Array.from({length: 9}).map(
      (_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
    );

    const handleResponse = data => {
      const shows = data.map(show => show.data);
      this.setState({
        isLoading: false,
        title: shows.map(show => show.name),
        image: shows.map(show => show.image.medium),
        rating: shows.map(show => show.rating.average),
        otherDetails:shows.map((show,index)=>{
  return [
          show.genres[index],
          show.schedule[index],
          show.language[index],
          show.network[index],
          show.summary[index],
];
        }),
      });
    };
    const handleError = error => {
      this.setState({
        isLoading: false,
      });
    };
    console.log(this.state.otherDetails.genres);

    Promise.all(requestUrls.map(url => axios.get(url)))
      .then(handleResponse)
      .catch(handleError);
  };
  render() {

    const {isLoading, title, image, rating, otherDetails} = this.state;
    if (isLoading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }console.log(this.state);
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <View style={{backGroundColor: 'red'}} />
        <ScrollView style={{flex: 1}}>
          <Card
            title={this.state.title}
            rating={this.state.rating}
            source={this.state.image}
            navigation = {this.props.navigation}
          />
        </ScrollView>
        <Text>here images</Text>
      </View>
    );
  }
}

任何帮助都会很好，谢谢你...！

Answer 1

将来自 tvmaze 的响应存储为数组而不是尝试将所有值映射到键会使您的生活更轻松一些。这样的事情应该有效：

import axios from 'axios'
import React from 'react'
import { ActivityIndicator, ScrollView, Text, View } from 'react-native'
import Card from '../Components/Card/card'

export default class HomeScreen extends React.Component {
  state = {
    shows: [],
    isLoading: true
  }

  componentDidMount () {
    this.getData()
  }

  getData = () => {
    const requestUrls = Array.from({length: 9}).map(
      (_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`
    )

    const handleResponse = data => {
      console.log(data)
      this.setState({
        isLoading: false,
        shows: data
      })
    }
    const handleError = error => {
      console.log(error)
      this.setState({
        isLoading: false
      })
    }

    Promise.all(requestUrls.map(url => axios.get(url)))
      .then(handleResponse)
      .catch(handleError)
  }

  render () {
    const {isLoading, shows} = this.state
    if (isLoading) {
      return <ActivityIndicator size='large' color='#0000ff' />
    }
    console.log(this.state)
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <View style={{backGroundColor: 'red'}} />
        <ScrollView style={{flex: 1}}>
          {shows.length && shows.map(show => (
            <Card key={show.data.id}
                  title={show.data.name}
                  {/*navigation={this.props.navigation}*/}
            />
          ))}
        </ScrollView>
        <Text>here images</Text>
      </View>
    )
  }
}

获取嵌套对象后映射数据

Mapping over data after fetching nested objects

arrays

reactjs

array.prototype.map