使用 react-native 的 FlatList 时获取 undefined 不是一个对象

Question

最近开始研究React Native。现在我尝试在页面上显示一组对象。我做的一切都好像是正确的，但我得到一个错误：

Undefined is not an object (evaluating 'task.name'

我有两个问题，我做错了什么，为什么在 React Native 中，元素是使用 FlatList 而不是通过 map 方法显示的？这是我的代码片段：

import React, {useState} from "react";
import {FlatList, StyleSheet, Text, View} from "react-native";

export default function Tasks() {

const [tasks, setTasks] = useState([
    {id: 1, name: "By Bread"},
    {id: 2, name: "By pizza"},
    {id: 3, name: "By snack"}
])

return (<View>
    <FlatList data={tasks} renderItem={({task}) => (
        <Text key={id}>{task.name}</Text>
    )}/>
        </View>)
}

const styles = StyleSheet.create({})

Answer 1

您的Text中有一个key = {id}，此时没有定义id。而且您缺少 FlatList 的 keyExtractor。同样在您的 renderItem 中，使用 item 而不是 task。

试试这个：

import React, {useState} from "react";
import {FlatList, StyleSheet, Text, View} from "react-native";

export default function Tasks() {

const [tasks, setTasks] = useState([
    {id: 1, name: "By Bread"},
    {id: 2, name: "By pizza"},
    {id: 3, name: "By snack"}
])

return (
    <View>
      <FlatList data={tasks} 
        renderItem={({item}) => (<Text keyExtractor={item => item.id}>{item.name}</Text>)}
      />
    </View>
    )
}

const styles = StyleSheet.create({})

使用 react-native 的 FlatList 时获取 undefined 不是一个对象

Getting undefined is not an object when using react-native's FlatList

javascript

react-native

react-native-flatlist