Реагируйте: setState после запроса graphQL

Question

Я искал пару часов сейчас, но просто не могу найти ответ.Смотрите мой код ниже.Я запрашиваю некоторую информацию о метро для использования на информационном экране.Я получаю информацию, видя, как console.log работает.Однако у меня возникли трудности с использованием этого результирующего объекта.Я хочу использовать полученные данные, чтобы я мог их увидеть, когда прибудет следующий поезд.С этой целью я пытаюсь установить состояние с результатом, чтобы я мог получить доступ к элементам данных ниже.Однако, теперь я застрял в setState, что вызывает у меня проблемы.Я чувствую, что мне нужно связать функцию, но this.main = this.main.bind(this) не работает.

import React from "react";
import { GraphQLClient } from "graphql-request";

class Rutetider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stoppestedet: "rutetider lastes ned"
    };

    async function main() {
      const endpoint = "https://api.entur.org/journeyplanner/2.0/index/graphql";

      const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
          ET: "lossfelt-tavle"
        }
      });

      const query = `
    {
  stopPlace(id: "NSR:StopPlace:58249") {
    id
    name
    estimatedCalls(timeRange: 3600, numberOfDepartures: 20) {     
      realtime
      aimedArrivalTime
      aimedDepartureTime
      expectedArrivalTime
      expectedDepartureTime
      actualArrivalTime
      actualDepartureTime
      cancellation
      notices {
        text
      }
      situations {
        summary {
          value
        }
      }
      date
      forBoarding
      forAlighting
      destinationDisplay {
        frontText
      }
      quay {
        id
      }
      serviceJourney {
        journeyPattern {
          line {
            id
            name
            transportMode
          }
        }
      }
    }
  }
}
  `;

      const data = await graphQLClient.request(query);
      console.log(data);
      this.setState({ stoppestedet: data.stopPlace.name });
    }

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

  render() {
    return (
      <div>
        rutetider
        <div className="grid-container2">
          <div>Mot byen</div>
          <div>fra byen</div>
          <div>{this.state.stoppestedet}</div>
        </div>
      </div>
    );
  }
}

export default Rutetider;

Answer 1

«вероятно, проще» - использовать интегрированное решение (apollo), чем минимальную библиотеку низкого уровня.В большинстве случаев (по мере роста проекта) большее количество компонентов, извлекающих данные, управляющих отдельными GraphQLClient для всех из них, не будет оптимальным решением.Apollo предоставляет вам централизованную «точку выборки», кеш и многое другое.

Синтаксическая ошибка исходит от function - в class достаточно написать async main()

https://codesandbox.io/s/l25r2kol7q

Вероятно, было бы лучше сохранить все данные в состоянии и извлечь необходимые части позже (на render) и использовать этот объект как «флаг готовности данных» (как я сделал для place - 'stoppestedet')- изначально undefined (в конструкторе) для начального рендеринга (условный рендеринг, некоторый <Loading /> компонент):

render() {
  if (!this.state.stoppestedet) return "rutetider lastes ned";
  return (
    <div>
      rutetider
      <div className="grid-container2">
        <div>Mot byen</div>
        <div>fra byen</div>
        <div>{this.renderFetchedDataTable()}</div>
      </div>