反应本机TypeError：未定义不是一个对象（评估'_ref.item'）

Question

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

错误：TypeError：未定义不是对象（正在评估'_ref.item'）

我在YouTube上遵循了此tutorial，并且我的代码与视频中的代码基本相同，我相信由于视频是一年前上传的，因此文档可能已更改。

使用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
    },

})

Answer 1

您正试图破坏_renderPost参数中的“项目”。没有传入任何对象，因此它在抱怨。

Answer 2

只需用此代码替换您的代码，我认为它将解决问题

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