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>",

现在我正在尝试在主屏幕中执行的操作，我的状态与对象键otherDetail有关，我正在尝试获取流派语言网络时间表和摘要，因此我不确定发生了什么错误这是我的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>
    )
  }
}

提取嵌套对象后映射数据

1 个答案: