无法从API获取嵌套值（本机反应）

Question

我正在尝试创建一个应用程序来显示从特定火车站到另一个火车站的离开，虽然我的代码有效，但我无法从API网址获得我想要的价值。 （我已经使用不同的API网址对其进行了测试，但它确实有效）

这是我的代码

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class DeparturesList extends Component {
  state = { departs: [] };

  componentWillMount() {
    axios.get('https://extranet.trainose.gr/services/passenger_public/mobile_app/ajax.php?c=dromologia&op=vres_dromologia&apo=ΛΑΡΙ&pros=ΘΕΣΣ&date=2018-01-10&rtn_date=undefined-undefined-&travel_type=1&trena%5B%5D=apla&trena%5B%5D=ic&trena%5B%5D=ice&trena%5B%5D=bed&time=23%3A59&time_type=anaxwrhsh&rtn_time=23%3A59&rtn_time_type=anaxwrhsh')
      .then(response => this.setState({ departs: response.data }));
  }

  renderDepartures() {
    return this.state.departs.map(depart => <Text>{depart.data.metabash.segments.treno}</Text>);
  }

  render() {
    console.log(this.state);

    return (
      <View>
        {this.renderDepartures()}
      </View>
    );
  }
}

export default DeparturesList;

任何帮助都会受到大力赞赏!!

Answer 1

首先，您应该看一下从服务器获得的响应。首先，response.data不是出发名单，response.data.metabash就是你要找的。

以下是响应的结构：

{
  "status": int,
  "message": String,
  "data": {
    "metabash": [{
      ttt: String,
      segments: Array<Segments>
    }],
  },
}

要获取嵌套值，可以使用以下内容：

this.state.departs.map(depart => depart.segments.map(segment => <Text>{
  segment.treno
}</Text>)); 

Answer 2

好吧，所以给了一个尝试和大量的研究和失败的尝试我得到了我想要的！

这是我的代码

   import React from 'react';
import { AppRegistry, FlatList, ActivityIndicator, Text, View } from 'react-native';
import Header from './src/components/Header';

export default class FetchExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true };
  }

  componentDidMount() {
    return fetch('https://extranet.trainose.gr/services/passenger_public/mobile_app/ajax.php?c=dromologia&op=vres_dromologia&apo=%CE%9B%CE%91%CE%A1%CE%99&pros=%CE%98%CE%95%CE%A3%CE%A3&date=2018-01-10&rtn_date=undefined-undefined-&travel_type=1&trena%5B%5D=apla&trena%5B%5D=ic&trena%5B%5D=ice&trena%5B%5D=bed&time=23%3A59&time_type=anaxwrhsh&rtn_time=23%3A59&rtn_time_type=anaxwrhsh')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.data.metabash,
        }, () => {

        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, padding: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
      <Header />
        <FlatList
          data={this.state.dataSource}
          renderItem={({ item }) => <Text>{item.segments[0].treno}</Text>}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('trainstation', () => FetchExample);