React native React本机GraphQL嵌套数据数组返回错误

我已经想尽一切办法来解决这个问题，但我仍然感到困惑。我正在使用AWS AppSync GraphQL存储一个数据集，我想将其调用到一个SectionList中

对于SectionList，我使用硬编码id通过GraphQL查询调用数据集。当我使用虚拟数据时，SectionList正确显示。它还正确显示API中的1对1关系

我已经配置了amplify以增加语句深度，并且可以看到对象中的数据

分区列表的代码

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, Image, ImageBackground, ScrollView, TouchableOpacity, SectionList, SafeAreaView } from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
import AntDesign from 'react-native-vector-icons/AntDesign';

import { API, graphqlOperation } from 'aws-amplify';
import { getGame, listGameSections, listGames } from '../graphql/queries';

const Item = ({ title }) => (

    <View>
        <Text>
           {title}
        </Text>
    </View>
);

const GameScreen = ({ navigation }) => {

    const [game, setGame] = useState([]);

    useEffect(() => {
        const fetchGame = async () => {
            const gameInfo = { id: '0e2cb273-b535-4cf7-ab16-198c44a4991c'};
        if (!gameInfo) {
          return;
        }
            try {
                const response = await API.graphql(graphqlOperation(getGame, {id: gameInfo.id}))
                setGame(response.data.getGame);
                console.log(response);
            } catch (e) {
            }
        };

        fetchGame();
    }, [])

    return (

        <SafeAreaView>
            <View>
               <Text>
                 {game.name}
               </Text>    
            </View>

            <SectionList
                sections={game.sections.items}
                keyExtractor={(item, index) => item + index}
                renderItem={({ item }) => <Item title={item} />}
                renderSectionHeader={({ section: { title } }) => (
                    <View>
                        <Text>{title}</Text>
                    </View>
                )}>
            </SafeAreaView>
)
};

export default GameScreen;

import React，{useState，useffect}来自“React”；
从“react native”导入{View、样式表、文本、图像、ImageBackground、ScrollView、TouchableOpacity、SectionList、SafeAreaView}；
从“反应本机向量图标/羽毛”导入羽毛；
从“react native vector icons/AntDesign”导入AntDesign；
从“aws amplify”导入{API，graphqlOperation}；
从“../graphql/querys”导入{getGame，listGameSections，listGames}；
常量项=（{title}）=>(
{title}
);
常量游戏屏幕=（{navigation}）=>{
const[game，setGame]=useState（[]）；
useffect（（）=>{
const fetchGame=async（）=>{
const gameInfo={id:'0e2cb273-b535-4cf7-ab16-198c44a4991c'}；
如果（！gameInfo）{
返回；
}
试一试{
const response=await API.graphql（graphql操作（getGame，{id:gameInfo.id}））
setGame（response.data.getGame）；
控制台日志（响应）；
}捕获（e）{
}
};
fetchGame（）；
}, [])
返回(
{game.name}
项目+索引}
renderItem={（{item}）=>}
renderSectionHeader={（{section:{title}}}）=>(
{title}
)}>
)
};
导出默认游戏屏幕；

对象的日志。 我试图显示getGame.sections.items数组，但返回一个错误，未定义的不是对象。无法读取未定义的属性项

---

请帮帮我，我现在很难受。当我在函数前面调用game.name时，它会正确显示，但game.sections.items会在SectionList中抛出一个未定义的错误。

Xadm，您为我指明了正确的方向。我在代码中添加了以下内容：

const [game, setGame] = useState({});
const [gameSection, setGameSection] = useState([]);

在我看来：

setGameSection(response.data.getGame.sections.items)

---

调用数据时，game.name需要一个对象，而game.sections.items需要SectionList的数组。为每个初始状态添加两个不同的函数，一个用于对象，一个用于数组，能够解决问题并渲染数据。

它是异步的，然后在第一个渲染状态（“游戏”）具有初始值

[]

（为什么是数组！？）。。。当然，此时没有

game.title

（安全未定义）或

game.sections.items

（尝试访问未定义的子字段）。。。更严格地遵循教程。。。显示“加载”是有原因的，这证明你仍然不明白。。。无需将数据复制到本地状态。。回到教程