从 API 获取嵌套值时遇到问题（反应原生）答案

【问题标题】：Trouble getting nested value from API (react native)从 API 获取嵌套值时遇到问题（反应原生）
【发布时间】：2018-08-30 13:43:34
【问题描述】：

我正在尝试制作一个应用程序来显示从特定火车站到另一个火车站的发车情况，虽然我的代码有效，但我无法从 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;

任何帮助将不胜感激！

【问题讨论】：

标签： api react-native axios

【解决方案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>));

【讨论】：

感谢安托万的回复！所以我已经用 response.data.metabash 替换了 response.data 但我该如何获得更深层次的价值？如何查看服务器的响应？再次感谢你！
如果我使用例如.({ departs: response.data.message })); 我可以在控制台中看到结果，但我无法更深入地访问其余值:(
@SuperNDesigns 要查看服务器的响应，您可以使用Postman，witch 是一个很棒的工具，然后使用此tool 美化响应。我已经更新了关于如何获取嵌套值的答案
谢谢安托万！我添加了一个 Chrome 扩展程序，可以自动将 JSON 代码转换为...漂亮的 :) 我不知道 Postman，所以我会试一试。我的代码仍然有问题，但非常感谢您的回复！
是的，我正在调试我的代码，这也是我想看到的。无论如何，我想我会用 fetch 而不是 axios 来尝试它。感谢 Antoine 的兴趣和帮助!

【解决方案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);

【讨论】：