![](/img/trans.png)
[英]Can't find variable when adding data to Flatlist from json in React-Native
[英]Can't find variable: item React native FlatList
大家好,我的 FlatList 有問題,代碼如下:
我不知道問題出在哪里
import React, { Component } from 'react'
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {View, Text, FlatList} from 'react-native';
import {
Avatar,
Button,
Card,
Title,
Paragraph,
List,
Headline,
} from 'react-native-paper';
export default class Home extends React.Component{
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
this.fetchLastestPost();
}
async fetchLastestPost() {
const response = await fetch(
'https://kriss.io/wp-json/wp/v2/posts?per_page=5'
);
const posts = await response.json();
this.setState({posts});
}
render() {
return (
<List>
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
data={this.state.posts}
renderItem={({ item }) => (
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>{item.title.rendered}</Title>
</Card.Content>
<Card.Cover
source={{ uri: item.jetpack_featured_media_url }}
/>
</Card>
)}
keyExtractor={item,index => index.toString()}
/>
</List>
)
}
}
我的目標是在卡片組件中將 wordpress 博客中的帖子顯示到我的主頁,但我不斷收到此錯誤: ReferenceError: Can't find variable: item
謝謝你的幫助:)
由於這條線,您會收到該錯誤
keyExtractor={item,index => index.toString()}
將其更改為
keyExtractor={(item,index) => index.toString()}
另一件事是您使用 List 的方式錯誤,並且當您使用 FlatList 時,無需在此處使用 List 而不是 List 使用 View。
<View>
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
data={this.state.posts}
renderItem={({ item }) => (
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>{item.title.rendered}</Title>
</Card.Content>
<Card.Cover
source={{ uri: item.jetpack_featured_media_url }}
/>
</Card>
)}
keyExtractor={(item,index) => index.toString()}
/>
</View>
希望這可以幫助!
在您的代碼中, state
中的posts
被正確設置為空數組。
后
const posts = await response.json();
this.setState({posts});
posts
可以不是數組而是其他。
先檢查一下
在你的 renderItem 方法中,不要在 {} 中傳遞項目,首先控制台在這里記錄你的項目參數,看看值是什么:
renderItem={(item ) => { console.log({item}) return <Card style={{ shadowOffset: { width: 5, height: 5 }, width: '90%', borderRadius: 12, alignSelf: 'center', marginBottom: 10, }}> <Card.Content> <Title>{item.title.rendered}</Title> </Card.Content> <Card.Cover source={{ uri: item.jetpack_featured_media_url }} /> </Card> }}
這樣您可以從源中提取數據並在平面列表中設置
數據= {this.state.GridListItems}
renderItem={({item}) =>
<TouchableOpacity
onPress={this.getListViewItem.bind(this, item)}
style={{flexDirection: 'row',marginTop:10}}
>
<Image source={{ uri: item.icon}} style = {{height:65,width:65,marginStart:20,padding:10,alignSelf:"center",borderRadius:5}} />
<Text style={styles.item} >{item.key}</Text>
</TouchableOpacity>
}
ItemSeparatorComponent={this.renderSeparator}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.