Question

我已经搜索了几个小时，但似乎找不到答案。请参阅下面的代码。我要求在信息屏幕上使用一些地铁信息。我正在获取信息，看到console.log有效。但是，我很难使用这个结果对象。我想使用收到的数据，以便我可以在下一班火车到达时显示。为此，我尝试使用setState和结果，以便可以进一步访问数据元素。但是，现在我陷入了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处），然后将此对象用作“数据就绪标志”（就像我对“ 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>

在graphQL请求后反应：setState

1 个答案: