使用 react-native 的 FlatList 时获取未定义不是对象

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({})