React Native TypeError:未定义不是对象(评估'_ref.item')
2019-05-23
7011
我正在尝试克隆 Instagram,但在使用 FlatList 时出现此错误:
错误:TypeError:未定义不是对象(评估“_ref.item”)
我按照 YouTube 上的 教程 进行操作,我的代码与视频中的代码基本相同,我相信文档可能已更改,因为视频是 1 年前上传的。
使用 React Native Cli & android studio
import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";
class PostFeed extends Component{
_renderPost({ item }) {
return <Post />;
}
_returnKey(item) {
return item.toString();
}
render() {
return (
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={this._renderPost()}
/>
);
}
}
export default PostFeed;
这是 InstaClone.js
import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
import config from "./config";
import { PostFeed } from './components/container';
class InstaClone extends Component {
render() {
return (
<View style={{ flex: 1, width: 100+"%", height: 100+"%"}}>
<View style={styles.tempNav}>
<Text>Instagram</Text>
</View>
<PostFeed/>
</View>
);
}
}
export default InstaClone;
const styles = StyleSheet.create({
tempNav: {
width:100+"%",
height: 56,
backgroundColor:"rgb(250,250,250)",
borderBottomColor:"rgb(233,233,233)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
userBar: {
width:100+"%",
height: config.styleConstants.rowHeight,
backgroundColor: "#fff",
flexDirection: "row",
paddingHorizontal: 10,
justifyContent: "space-between"
},
userPic: {
height:40,
width:40,
borderRadius:20
},
iconBar: {
height: config.styleConstants.rowHeight,
width: 100 + "%",
borderColor:"rgb(233,233,233)",
borderTopWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth,
flexDirection: "row"
},
icon: {
marginHorizontal: 5
},
})
2个回答
您正尝试解构 _renderPost 参数中的“item”。没有传入对象,因此它会报错。
Nick V.
2019-05-23
只需用这个替换您的代码,我认为它可以解决问题
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={({ item }) => <View> {item} </View>}
/>
Rajesh Bhartia
2019-05-23