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

Posted 2023-02-16

【中文标题】使用 react-native 的 FlatList 时获取未定义不是对象

【英文标题】：Getting undefined is not an object when using react-native's FlatList

【发布时间】：2022-01-18 10:48:42

【问题描述】：

我们需要你的帮助。最近开始研究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()

【参考方案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()

【讨论】：

@yousomuar，不幸的是，它没有帮助 - 错误是一样的

@Frankenstar 将task 更改为item，它应该可以工作。我测试了它。我编辑了我的答案。你可以复制它。

@yousomuar，谢谢，它有效。但为什么应该是item？

这是他们在react-native 的文档中使用的。

很高兴它成功了。请将回复标记为您正在寻找的答案。它会帮助别人。