Question

我有一个后端Drupal网站和react-native应用程序作为我的前端。我正在从应用程序执行graphQL查询，并且能够显示console.log中的内容。但是，我的目标是在render return方法中使用该查询的调用，并在应用程序中显示它，但是没有运气。请注意，我还有另一个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
  })
}
...

Answer 1

那里有很多不同的地方是错误的。

Syntax error是因为您的<key>标签在此处未正确关闭：
```
(dataQuery) => <key={dataQuery.entityId}>{dataQuery})
```
而且... React Native没有<key>元素。您可以在docs Components部分中查看支持哪些组件。顺便说一句，React也没有这样的元素。
请求数据是异步的。因此，当您在render()中发送请求时，此方法将在返回数据之前更早地完成执行。你就是不能那样做。您能做什么呢？您应该请求数据（在此元素或其父元素或Redux reducer中-无关紧要），获得结果后，您需要使用.setState（如果它发生在组件内部）或.dispatch（如果您使用的是Redux）。这将调用render()，并且组件将使用检索到的数据进行更新。关于显示微调框或使用其他方法让用户知道数据仍在加载，还有其他问题。但这是正交的问题。只是为了让您知道。
即使请求数据以某种方式进行了同步（例如，从LocalStorage读取数据），也绝对不能在render()中执行此操作。此方法的调用频率更高，可以期望在此处使任何事情变得繁重将导致性能显着下降。

因此请牢记＃3和＃4，您应该在componentDidMount()，componentDidUpdate()中运行数据加载/获取操作，或者作为按钮点击处理的一部分。

返回方法内部的访问查询

1 个答案: