从API获取嵌套值时出现问题（react native）

我正在尝试制作一个应用程序，它将显示从一个特定火车站到另一个火车站的发车情况，尽管我的代码可以工作，但我很难从API url中获取所需的值。（我用不同的API url测试了它，它可以正常工作）

这是我的密码

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;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从“axios”导入axios；
类DeparturesList扩展组件{
状态={出发：[]}；
组件willmount（）{
axios.get（）https://extranet.trainose.gr/services/passenger_public/mobile_app/ajax.php?c=dromologia&op=vres_dromologia&apo=)∧ΑΡΡΕ∑∑日期=2018-01-10&rtnΗ日期=未定义的未定义的旅行类型=1&trena%5B%5D=apla&trena%5B%5D=ic&trena%5B%5D=ice&trena%5B%5D=床和时间=23%3A59&timeΗ类型=anaxwrhsh&rtnΗ时间=23%3A59&rtn时间类型=anaxwrhsh'）
.then（response=>this.setState（{departs:response.data}））；
}
RenderParties（）{
返回this.state.departes.map（depart=>{depart.data.metabash.segments.treno}）；
}
render（）{
console.log（this.state）；
返回(
{this.renderParties（）}
);
}
}
导出默认的部门列表；

---

任何帮助都将不胜感激

首先，您应该查看从服务器得到的响应。首先，

response.data

不是离开列表，

response.data.metabash

是您需要的

以下是响应的结构：

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

{
“状态”：int，
“消息”：字符串，
“数据”：{
“metabash”：[{
ttt:String，
段：数组
}],
},
}

要获取嵌套值，可以使用以下方法：

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

this.state.departs.map（depart=>depart.segments.map（segment=>{
特伦诺段
})); 

好的，我尝试了一下，经过大量的研究和失败的尝试，我得到了我想要的

这是我的密码

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

从“React”导入React；
从“react native”导入{AppRegistry、FlatList、ActivityIndicator、Text、View}；
从“./src/components/Header”导入标题；
导出默认类FetchExample扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true}；
}
componentDidMount（）{
回传('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_日期=未定义未定义-旅行类型=1&trena%5B%5D=apla&trena%5B%5D=ic&trena%5B%5D=ice&trena%5B%5D=bed&time=23%3A59&time类型=anaxwrhsh&rtn_时间=23%3A59&rtn_时间e_类型=anaxwrhsh'）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据源：responseJson.data.metabash，
}, () => {
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
if（此.state.isLoading）{
返回(
);
}
返回(
{item.segments[0].treno}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
}
AppRegistry.registerComponent（'trainstation'，（）=>FetchExample）；

谢谢Antoine的回复！因此我用response.data.metabash替换了response.data，但是我如何去获得更深层的值？我如何看到来自服务器的响应？再次非常感谢！如果我使用例如

（{departs:response.data.message}））我可以在控制台中看到结果，但我无法更深入地访问其余值：（@SuperNDesigns要查看服务器的响应，您可以使用witch，witch是一个很棒的工具，然后用它美化响应。我已经更新了关于如何获取嵌套值的答案谢谢Antoine！我添加了一个Chrome扩展，可以自动将JSON代码转换为…漂亮的：）我不知道邮递员的事，所以我会试试。我的代码仍然有问题，但非常感谢您的回复！是的，我正在调试我的代码，这也是我想看到的。无论如何，我想我将尝试使用fetch而不是axios。感谢Antoine的兴趣和帮助！