反应：graphQL 请求后的 setState答案

【问题标题】：React: setState after a graphQL request反应：graphQL 请求后的 setState
【发布时间】：2018-10-09 17:19:09
【问题描述】：

我已经搜索了几个小时，但似乎找不到答案。请参阅下面的代码。我要求在信息屏幕上使用一些地铁信息。我正在获取信息，看到 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;

【问题讨论】：

不清楚你的问题是什么，请澄清一下：setState 给你带来了什么样的问题？
main 在构造函数内部 - 在类/对象范围内定义它，从 componentDidMount 调用 this.main()...
@AlekseyBykov 我收到未定义的错误。
@xadm 感谢您的建议。我尝试按照您的建议进行操作，将main 的定义移到构造函数之外，然后从componentDidMount 调用它。但是现在我在 Main-function 上得到了这样的错误：SyntaxError /src/rutetider.js: Unexpected token, expected ( (13:17) 11 | } 12 | > 13 | async function main() { | ^ 14 | const endpoint = "https://api.entur.org/journeyplanner/2.0/index/graphql"; 15 | 16 | const graphQLClient = new GraphQLClient(endpoint, {
@xadm 可能更容易链接到沙箱：codesandbox.io/s/wkq28n5o6l

标签： reactjs graphql

【解决方案1】：

“可能更容易”是使用集成解决方案（apollo）比使用最小的低级库。在大多数情况下（随着项目的增长），更多的组件获取数据并为所有组件单独管理 GraphQLClient 并不是最佳解决方案。 Apollo 为您提供集中的“获取点”、缓存......等等。

语法错误来自function - 在class 中写async main() 就足够了

https://codesandbox.io/s/l25r2kol7q

最好将整个数据保存在状态中并稍后提取所需的部分（render）并将此对象用作“数据就绪标志”（就像我为 place - 'stoppestedet'所做的那样）-最初@ 987654327@（在构造函数中）用于初始渲染（条件渲染，一些<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>

【讨论】：