javascript - React Native类型错误: undefined is not an object (evaluating '_ref.item' )

Question

我正在尝试克隆 Instagram，但在使用 FlatList 时出现此错误:

错误:类型错误:未定义不是对象(正在评估“_ref.item”)

我关注了这个tutorial在 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
    },

})

Answer 1

您正在尝试解构 _renderPost 参数中的“项目”。没有传入任何对象，因此它正在提示。