Javascript React Native TypeError:undefined不是一个对象（计算'；(参考项'；)）

我正在尝试进行Instagram克隆，但使用FlatList时出现以下错误：

错误：TypeError:undefined不是对象（正在计算“\u ref.item”）

我在youtube上关注了这一点，我的代码与视频上的代码基本相同，我相信可能是因为视频是在一年前上传的，所以文档发生了变化

使用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;

import React，{Component}来自“React”；
从“react native”导入{FlatList}；
从“./演示文稿”导入邮件；
类PostFeed扩展组件{
_renderPost（{item}）{
回来
}
_返回键（项目）{
return item.toString（）；
}
render（）{
返回(
);
}
}
导出默认的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
    },

})

import React，{Component}来自“React”；
从“react native”导入{View、Text、StyleSheet、Image、Dimensions、TouchableOpacity}；
从“/config”导入配置；
从“./components/container”导入{PostFeed}；
类InstaClone扩展了组件{
render（）{
返回(
一款图片分享应用
);
}
}
导出默认InstaClone；
const styles=StyleSheet.create({
临时导航：{
宽度：100+“%”，
身高：56，
背景颜色：“rgb（250250）”，
borderBottomColor:“rgb（233）”，
borderBottomWidth:StyleSheet.hairlineWidth，
辩护内容：“中心”，
对齐项目：“中心”
},
用户栏：{
宽度：100+“%”，
高度：config.styleConstants.rowHeight，
背景颜色：“fff”，
flexDirection:“行”，
水平方向：10，
为内容辩护：“之间的空间”
},
用户图片：{
身高：40，
宽度：40，
边界半径：20
},
iconBar：{
高度：config.styleConstants.rowHeight，
宽度：100+“%”，
边框颜色：“rgb（233）”，
borderTopWidth:StyleSheet.hairlineWidth，
borderBottomWidth:StyleSheet.hairlineWidth，
flexDirection：“行”
},
图标：{
marginHorizontal:5
},
})

您正在尝试对renderPost参数中的“项”进行解构。没有传入对象，因此它正在抱怨

您正试图对renderPost参数中的“项”进行解构。没有传入对象，因此它正在抱怨

只要用这个替换你的代码，我想它就会解决这个问题

  <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>}
 />

{item}
/>

只要用这个替换你的代码，我想它就会解决这个问题

  <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>}
 />

{item}
/>

现在我获得不变冲突：元素类型无效：应为字符串或类/函数-检查“InstaClone”的呈现方法现在我获得不变冲突：元素类型无效：应为字符串或类/函数-检查“InstaClone”的呈现方法