Проблема получения вложенного значения из API (реагирует на нативный) - PullRequest
Новая
       6

Проблема получения вложенного значения из API (реагирует на нативный)

0 голосов
/ 30 августа 2018

Я пытаюсь создать приложение, которое будет отображать отправления с одного железнодорожного вокзала на другой, и хотя мой код работает, у меня возникают проблемы с получением нужного значения из URL-адреса API. (Я проверил его с другим URL-адресом 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;

любая помощь будет высоко ценится !!

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

хорошо, так что попробуй и с МНОГО исследования и неудачных попыток я получил то, что хотел !!!

вот мой код 

   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);
0 голосов
/ 30 августа 2018

Во-первых, вы должны взглянуть на ответ, который вы получите от сервера. Прежде всего, 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>));
...