错误：TypeError: undefined is not an object (evalating 'tem.userName') when using flalist

Question

我对 reactnative flatlist 有问题，flatlis 不呈现
我应该在下面做什么是代码.......................... ..................................................... ..................................................... ......代码如下所示...................................................... ..................................................... ...........

在此处输入图像描述

import React, {useState, useEffect} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  SafeAreaView,
  ScrollView,
  Alert,
  Button,
  KeyboardAvoidingView,
  Platform,
  PermissionsAndroid,
  FlatList,
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

const App = () => {



  const Posts = [
    {
      id: '1',
      userName: 'Jenny Doe',
                postTime: '4 mins ago',
      post:
        'Hey there, this is my test for a post of my social app in React Native.',
      liked: true,
      likes: '14',
      comments: '5',
    },
    {
      id: '2',
      userName: 'John Doe',
      postTime: '2 hours ago',
      post:
        'Hey there, this is my test for a post of my social app in React Native.',
      liked: false,
      likes: '8',
      comments: '0',
    },
    {
      id: '3',
      userName: 'Ken William',
      postTime: '1 hours ago',
      post:
        'Hey there, this is my test for a post of my social app in React Native.',
      liked: true,
      likes: '1',
      comments: '0',
    },
    {
      id: '4',
      userName: 'Selina Paul',
      postTime: '1 day ago',
      post:
        'Hey there, this is my test for a post of my social app in React Native.',
      liked: true,
      likes: '22',
      comments: '4',
    },
    {
      id: '5',
      userName: 'Christy Alex',
      postTime: '2 days ago',
      post:
        'Hey there, this is my test for a post of my social app in React Native.',
      liked: false,
      likes: '0',
      comments: '0',
    },
  ];



  const renderItem = ({tem}) => {

    <View style={styles.item}>
      <Text style={styles.title}>{tem.userName}</Text>
      <Text style={styles.title}>{tem.post}</Text>
    </View>
  };
    
  return (
   
    <View>
  
      <FlatList
        data={Posts}
        renderItem={renderItem}
        keyExtractor={(tem) => tem.id}
      />

              </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 23,
  },
  input: {
    margin: 15,

    borderColor: '#7a42f4',
    borderWidth: 1,
  },
  submitButton: {
    backgroundColor: 'gray',
    padding: 10,
    margin: 15,
    height: 40,
    width: 10,
  },
  submitButtonText: {
    color: 'white',
  },
  buttonContainer: {
    width: '40%',
    alignSelf: 'center',
    marginVertical: 30,
    color: 'red',
  },
});

export default App;

Answer 1

您应该使用预定义item而不是tem 。 此外，似乎缺少return 。

const renderItem = ({item}) => {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{item.userName}</Text>
      <Text style={styles.title}>{item.post}</Text>
    </View>
  );
};