Question

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

2021-12-15

831

javascript reactjs react-native

最近开始研究 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

使用 item 而不是 task ，因为 renderItem 获取一个带有 item 的对象作为参数，该对象保存着 data 数组中的当前行。如下所示：

import { 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}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>
  );
}

以下是来自官方 doc 的 renderItem 的解构签名：

renderItem({ item, index, separators });

此外，您在 Text 上还有一个您不需要的 key = {id 。