使用 GraphQL 并使用 FlatList 的 React-native 应用程序答案

【问题标题】：React-native app with GraphQL and using FlatList使用 GraphQL 并使用 FlatList 的 React-native 应用程序
【发布时间】：2020-11-18 23:48:05
【问题描述】：

我正在构建一个使用 GraphQL 和 React Native 应用程序的应用程序。我有一个看起来像这样的用户架构。

export const USER = gql`
    {
        user {
            id
            uuid
            email
            username
            firstName
            lastName
            roles {
                id
                name
            }
            created
            updated
        }
    }
`;

我正在使用一个组件在屏幕上显示有关用户的信息。我可以轻松添加名字、姓氏和电子邮件。但是，我想添加他们的角色。如下所示，我在 Row 中使用 FlatList 并且它没有呈现。我正在寻求有关如何执行此操作的一些指导。

import React, { useState } from "react";
import { View, FlatList, Text } from "react-native";
import {
    FirstHeader,
    Row,
    LastRow
} from "./table";
import { Blue as Button } from "./button";
import { withQueries, USER } from "../api/queries";
import _ from "lodash";

export function AccountSection({ user, onLogout }) {
    return (
        <View>
            <FirstHeader>Account</FirstHeader>
            <Row>{`${_.get(user, "data.user.firstName", "")} ${_.get(user, "data.user.lastName", "")}`}</Row>
            <Row>{_.get(user, "data.user.email", "")}</Row>
            <Row>
                <FlatList 
                    data={_.get(user.roles,"data.user.roles","")}
                    renderItem={(item) => item.roles.name}
                    keyExtractor={item => item.roles.id} />
            </Row>
            <LastRow>
                <Button style={{ flex: 1 }} onPress={onLogout}>Log Out</Button>
            </LastRow>
        </View>
    );
}

export default withQueries({ user: USER })(AccountSection);

【问题讨论】：

标签： react-native graphql

【解决方案1】：

看起来您提取了错误的字段。试试

          <FlatList 
                data={_.get(user,"data.user.roles",[])}
                renderItem={(item) => item.name}
                keyExtractor={item => item.id} />

【讨论】：