react-native - 使用 GraphQL 并使用 FlatList 的 React-native 应用程序
问题描述
我正在构建一个使用 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);
解决方案
看起来您提取了错误的字段。尝试
<FlatList
data={_.get(user,"data.user.roles",[])}
renderItem={(item) => item.name}
keyExtractor={item => item.id} />
推荐阅读
- arrays - 如何使用 Angular 中的 observables 在 API http 请求的所有页面中获取数据?
- node.js - 如何使用 mongoose 获取最近添加的文档?
- python - 名称以下划线开头的变量/方法是内部的还是受保护的?
- cmake - Cmake添加外部项目?
- c# - 如何修复“路径中的非法字符”。在文件路径中?
- regex - 如何在vim中搜索所有不包含'/'的字符串?
- blockchain - 是否有必要使用加密货币进行支付,使用区块链?
- php - 当声明数组变量在视图中未定义但使用控制器 laravel 5.7 时该怎么办
- bash - 如何验证 IP 地址范围(Shell 脚本)
- c# - 异步文件读取比同步或手动线程慢 40 倍