ListItem/FlatList 未从 GraphQL API 呈现数据答案

【问题标题】：ListItem/FlatList is not rendering data from GraphQL APIListItem/FlatList 未从 GraphQL API 呈现数据
【发布时间】：2020-03-10 12:38:56
【问题描述】：

这很有趣。我没有收到任何错误，但来自 GraphQL API 的数据没有被渲染到 FlatList 中。我在 UsersScreen 中看到的只是 Text 组件。我之前遇到过错误，因为我的数据是一个对象而不是数组，但即使在将我的对象作为数组传递之后，FlatList 也无法识别数据

import { API, graphqlOperation } from 'aws-amplify'
import { Text, View, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';



const listUsers = `query listUsers {
  listUsers {
      username


  }
}`;



export default function UsersScreen() {

const [allUsers, setAllUsers] = useState([]);

  listQuery = async () => {
    const allUsers = await API.graphql(graphqlOperation(listUsers));
    setAllUsers(allUsers);
    console.log(JSON.stringify(listUsers, null, 2));


  };

  keyExtractor = (_item, index) => index.toString()
  renderItem = ({ item }) => (
    <ListItem
      title={item.username}
    />
  )

  return(
    <View> 
      <Text>All Users</Text>
      <FlatList
        keyExtractor={keyExtractor}
        data={allUsers}
        renderItem={renderItem}
      /> 
    </View>
  );
}

【问题讨论】：

你的所有用户数据是什么？
allUsers 是状态变量，setAllUsers 是方法。 ListUsers 是数据的名称。

标签： reactjs react-native graphql

【解决方案1】：

在您的代码中，我没有找到调用的 listQuery 方法。你可以使用React.useEffect，效果和componentDidMount,componentDidUpdate一样， componentWillUnmount.你可以试试下面的代码：

import React, { useState, useEffect } from 'react';

....

useEffect(() => {
    listQuery();
  },[allUsers]);

【讨论】：

我试过了，但我收到错误消息“未定义 allUsers”
API.graphql(graphqlOperation(listUsers)) 这个返回什么？可以贴一下吗
console.log 返回“查询 listUsers {\n listUsers {\n username\n }\n}”
查询在 GraphQL 中运行良好，当使用按钮组件时，我可以看到我想要的用户名数据。 "
你可以尝试使用静态数据来调试你的FlatList/ListItems。如果显示，那就是你的数据格式错误。 const allUsers = [ { username: 'First Item'},{username: 'Second Item'},{ username: 'Third Item'},];