在返回方法中访问查询答案

【问题标题】：Access query inside return method在返回方法中访问查询
【发布时间】：2019-04-02 03:50:01
【问题描述】：

我有一个后端 Drupal 站点和 react-native 应用程序作为我的前端。我正在从应用程序执行 graphQL 查询，并且能够在 console.log 中显示内容。但是，我的目标是在渲染返回方法中使用查询调用并将其显示在应用程序中，但没有运气。请注意，我有另一个 REST API 调用 testName 并且已经显示在应用程序中。我主要关心的是如何在应用程序中显示 graphQL 查询。

以下是我的实际实现，但删除了一些行。

...
import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://192.168.254.105:8080/graphql'
});

client.query({
  query: gql`
    query {
      paragraphQuery {
        count
        entities {
          entityId
          ...on ParagraphTradingPlatform {
            fieldName
            fieldAddress
          }
        }
      }
    }
  `,
})
.then(data => {
  console.log('dataQuery', data.data.paragraphQuery.entities) // Successfully display query contents in web console log
})
.catch(error => console.error(error));

const testRow = ({
  testName = '', dataQuery // dataQuery im trying to display in the app
}) => (
  <View>
    <View>
      <Text>{testName}</Text> //  This is another REST api call.
    </View>
    <View>
      <Text>{dataQuery}</Text>
    </View>
  </View>
)

testRow.propTypes = {
  testName: PropTypes.string
}

class _TestSubscription extends Component {
  ...
  render () {
    return (
      <View>
        <FlatList
          data={this.props.testList}
          ...
          renderItem={
            ({ item }) => (
              <testRow
                testName={item.field_testNameX[0].value}
                dataQuery={this.props.data.data.paragraphQuery.entities.map((dataQuery) => <key={dataQuery.entityId}>{dataQuery})} // Here I want to call the query contents but not sure how to do it
              />
            )}
        />
      </View>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return ({
    testList: state.test && state.test.items,
    PreferredTest: state.test && state.test.PreferredTest
  })
}
...

【问题讨论】：

“没有运气”是什么意思？是否显示错误？要不然是啥？无论如何，在render() 中请求某些东西是个坏主意，因为请求是异步的，所以当数据到来时render() 已经完成。还有一个理由不在render() 中做任何事情：它的运行频率通常比你预期的要多得多（直到你在那里有PureComponent）。
error: bundling failed: SyntaxError 在这行dataQuery={this.props.data.data.paragraphQuery.entities.map((dataQuery) => <key={dataQuery.entityId}>{dataQuery})}
**直到你有 PureComponent 那里
@skyboyer 我们不能将查询数据作为道具吗？
你能在你的问题中添加完整的错误信息吗？不，我并不是说您需要额外的组件来处理数据加载

标签： javascript reactjs react-native graphql drupal-8

【解决方案1】：

那里有几个不同的地方是错误的。

Syntax error 是因为你的<key> 标签在这里没有正确关闭：
```
(dataQuery) => <key={dataQuery.entityId}>{dataQuery})
```
而且... React Native 没有 <key> 元素。您可以在docs Components 部分查看支持哪些组件。顺便说一句，React 也没有这样的元素。
请求数据是异步的。因此，当您在render() 中发送请求时，此方法会在返回数据之前更早地完成执行。你不能那样做。你能做些什么呢？您应该请求数据（在此元素或其父级或 Redux 减速器中 - 没关系），在获得结果后，您需要使用 .setState（如果它发生在组件内部）或 .dispatch（如果您正在使用）设置状态还原）。这将调用render() 并且组件将使用检索到的数据进行更新。还有关于显示微调器或使用其他方法让用户知道数据仍在加载的其他问题。但这是正交问题。只是为了让您知道。

因此，考虑到 #3 和 #4，您应该在 componentDidMount()、componentDidUpdate() 中运行数据加载/获取，或者作为处理按钮点击的一部分。

【讨论】：