我是一个新的程序员,特别是用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”之外的组件
1条答案
按热度按时间pvcm50d11#
您正在传递一个空数组,该数组不符合SectionList预期的数据结构:
节列表的示例数据:
GamesInfoSection
类型应符合此数据格式。