我是一个新的程序员，特别是用React Native。我尝试创建一个FlatList，它工作正常，但数据没有显示为我想要的，因为我需要我的头来组织数据为我想要的。我搜索了一个我找到了组件。所以我重写代码工作，但当我把数据，它显示我应有的错误：

(property) sections: readonly SectionListData<any, GamesInfoSection>[]
An array of objects with data for each section.

No overload matches this call.
  Overload 1 of 2, '(props: SectionListProps<any, GamesInfoSection> | Readonly<SectionListProps<any, GamesInfoSection>>): SectionList<...>', gave the following error.
    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
  Overload 2 of 2, '(props: SectionListProps<any, GamesInfoSection>, context: any): SectionList<any, GamesInfoSection>', gave the following error.
    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.ts(2769)
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'

完整组件：

<SectionList

            sections={games}
            keyExtractor={(item, index) => item + index}
            renderItem={({ item }) => (

              <View style={styles.game_section}>

                <View style={styles.game_match}>
                  <View style={styles.game_time}>
                    <Text>{item.games?.time}</Text>
                  </View>

                  <View style={styles.breakLine}>
                  </View>

                  <View style={styles.game_team}>
                    <View style={styles.team}>
                      <View style={styles.team_brand}></View>
                      <Text style={styles.team_name}>{item.games?.home}</Text>
                    </View>

                    <View style={styles.team}>
                      <View style={styles.team_brand}> </View>
                      <Text style={styles.team_name}>{item.games?.away}</Text>
                    </View>

                  </View>

                  <View style={styles.breakLine}>
                  </View>

                  <View style={styles.score}>
                    <View style={styles.team}>
                      <Text style={styles.team_name}>{item.games?.homeScore}</Text>
                    </View>

                    <View style={styles.team}>
                      <Text style={styles.team_name}>{item.games?.homeScore}</Text>
                    </View>

                  </View>
                </View>
              </View>

            )}
            renderSectionHeader={({ section: { infoSection } }) => (

              <View style={styles.game_info}>
                <Text style={styles.game_country}>{infoSection?.country}</Text>
                <Text style={styles.game_league}>{infoSection?.league}</Text>
              </View>
            )}

          />

数据常数：

const [games, setGames] = useState<GamesInfoSection[]>();

  useEffect(() => {

    try {
      const api = setupApiGames();
      api?.get('/games').then(response => {

        setGames(response.data);

      }
      )
    } catch (error) {
      console.log(error + 'error ao acessar os Jogos');
    }

  }, [])

我试着把建议的解决方案的VScode：

sections={games as any}
            keyExtractor={(item, index) => item + index}
            renderItem={({ item }) => (

但它也不起作用，错误消失了，但应用程序不显示任何东西，只是一个白色页，甚至删除了“SectionList”之外的组件