Как мне сделать объект в реагировать родной? - PullRequest
Новая
       30

Как мне сделать объект в реагировать родной?

1 голос
/ 24 марта 2019

Работа над извлечением данных из внешнего API (FlightStats). В настоящее время выборка данных работает, поскольку она находит дочерние элементы родительского запроса. Теперь воткнул рендеринг через проблему с массивом.

  • Пробовал несколько опций для запроса и опций источника данных 
Request from API:

componentDidMount() {
    fetch('https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2019/3/24?appId=XXXXX&appKey=+XXXXX')
    .then((response) => response.json())
    .then((response) => {
      this.setState({
        request: response.request
      })
    })
    .catch((error) => {
        console.log(error)    
        });
    }

Constructor:

    constructor() {
        super();
        this.state = {
            request: 'carrier'
        }
    }

Render:

      <View style={Global.container}>
        <Text>{this.state.request.carrier}</Text>
          {/* //={[{ key: 'a'}, { key: 'b'}]}
          //renderItem={({item }) => <Text>{item.key}</Text>} */}
      </View>

Data result in Json

{"request":{"carrier":{"requestedCode":"AA","fsCode":"AA"},"codeType":{},"flightNumber":{"requested":"100","interpreted":"100"},"departing":true,"date":{"year":"2019","month":"3","day":"24","interpreted":"2019-03-24"},"url":"https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2019/3/24"},"scheduledFlights":[{"carrierFsCode":"AA","flightNumber":"100","departureAirportFsCode":"JFK","arrivalAirportFsCode":"LHR","stops":0,"departureTerminal":"8","arrivalTerminal":"3","departureTime":"2019-03-24T19:40:00.000","arrivalTime":"2019-03-25T06:50:00.000","flightEquipmentIataCode":"77W","isCodeshare":false,"isWetlease":false,"serviceType":"J","serviceClasses":["R","F","J","Y"],"trafficRestrictions":[],"codeshares":[{"carrierFsCode":"AY","flightNumber":"4012","serviceType":"J","serviceClasses":["F","J","Y"],"trafficRestrictions":[],"referenceCode":1139031},{"carrierFsCode":"BA","flightNumber":"1511","serviceType":"J","serviceClasses":["R","F","J","Y"],"trafficRestrictions":[],"referenceCode":1250367},{"carrierFsCode":"GF","flightNumber":"6654","serviceType":"J","serviceClasses":["J","Y"],"trafficRestrictions":["Q"],"referenceCode":2204628},{"carrierFsCode":"IB","flightNumber":"4218","serviceType":"J","serviceClasses":["R","F","J","Y"],"trafficRestrictions":[],"referenceCode":2305895},{"carrierFsCode":"LY","flightNumber":"8051","serviceType":"J","serviceClasses":["F","J","Y"],"trafficRestrictions":["Q"],"referenceCode":2942513}],"referenceCode":"807-470028--"}],"appendix":{"airlines":[{"fs":"AA","iata":"AA","icao":"AAL","name":"American Airlines","phoneNumber":"08457-567-567","active":true},{"fs":"LY","iata":"LY","icao":"ELY","name":"El Al","phoneNumber":"+ 972-3-9771111","active":true},{"fs":"AY","iata":"AY","icao":"FIN","name":"Finnair","phoneNumber":"+ 358 600 140 140","active":true},{"fs":"IB","iata":"IB","icao":"IBE","name":"Iberia","phoneNumber":"1800 772 4642","active":true},{"fs":"BA","iata":"BA","icao":"BAW","name":"British Airways","phoneNumber":"1-800-AIRWAYS","active":true},{"fs":"GF","iata":"GF","icao":"GFA","name":"Gulf Air","phoneNumber":"973 17 335 777","active":true}],"airports":[{"fs":"JFK","iata":"JFK","icao":"KJFK","faa":"JFK","name":"John F. Kennedy International Airport","street1":"JFK Airport","city":"New York","cityCode":"NYC","stateCode":"NY","postalCode":"11430","countryCode":"US","countryName":"United States","regionName":"North America","timeZoneRegionName":"America/New_York","weatherZone":"NYZ178","localTime":"2019-03-24T00:55:59.327","utcOffsetHours":-4.0,"latitude":40.642335,"longitude":-73.78817,"elevationFeet":13,"classification":1,"active":true},{"fs":"LHR","iata":"LHR","icao":"EGLL","name":"London Heathrow Airport","city":"London","cityCode":"LON","stateCode":"EN","countryCode":"GB","countryName":"United Kingdom","regionName":"Europe","timeZoneRegionName":"Europe/London","localTime":"2019-03-24T04:55:59.327","utcOffsetHours":0.0,"latitude":51.469603,"longitude":-0.453566,"elevationFeet":80,"classification":1,"active":true}],"equipments":[{"iata":"77W","name":"Boeing 777-300ER","turboProp":false,"jet":true,"widebody":true,"regional":false}]}}

Сообщение об ошибке:

Нарушение инварианта: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {resquestedCode, fsCode}). Если вы намеревались визуализировать коллекцию детей, используйте вместо этого массив.

Так вот где я застрял. Начальная выборка работает и находит дочерних элементов. Почему-то не уверен, почему я не могу отобразить элементы или просто отобразить результаты из json.

Подойдет любая помощь или учебные пособия. Еще раз спасибо

1 Ответ

2 голосов
/ 24 марта 2019

carrier - это объект в ваших данных JSON, и, следовательно, вы не можете распечатать его напрямую. Если вы хотите напечатать его в виде строки, сделайте это. 

<Text>{JSON.stringify(this.state.request.carrier)}</Text>

Если вы хотите, чтобы он выглядел аккуратно, вы можете отформатировать его следующим образом. 

<Text>{JSON.stringify(this.state.request.carrier, 0, 4)}</Text>
...