React Native+TS开发待办清单时FlatList renderItem报错

FlatList的renderItem回调接收的参数是一个包裹对象，单条列表数据存放在该对象的item字段中，不存在名为tarea的字段。你当前代码直接从参数里解构tarea，拿到的值是undefined，访问undefined.titulo就会触发你看到的报错。
你在useEffect里能正常打印titulo，是因为那部分逻辑是直接遍历tareas数组拿到的原始数据项，和FlatList传参的结构不是一回事，所以数据本身没问题，是参数解构写错了。
另外你写的keyExtractor部分逻辑是对的，这个回调的入参直接就是单条数据项，不需要取item字段，不用修改。

把自定义renderItem的参数解构改成正确结构即可，两种写法效果完全一致：

// 写法1：解构item字段并重命名为tarea，适配你已有的变量命名
const renderItem = ({item: tarea}: any) => {
  return(
    <>
      <Text>{tarea.titulo}</Text>
      <Text>{tarea.tarea}</Text>
    </>
  )
}

// 写法2：直接使用默认的item字段名
const renderItem = ({item}: any) => {
  return(
    <>
      <Text>{item.titulo}</Text>
      <Text>{item.tarea}</Text>
    </>
  )
}

既然项目用了TypeScript，尽量避免用any跳过类型校验，可以提前定义任务类型，从根源减少这类参数写错的问题：

// 定义任务数据的类型结构
type Tarea = {
  id: string | number;
  titulo: string;
  tarea: string;
}

// 声明状态时指定类型，初始值给空数组可以省去后续判空逻辑
const [tareas, setTareas] = useState<Tarea[]>([]);

给状态设置空数组初始值后，页面渲染部分的tareas &&判断也可以删掉，FlatList接收空数组会正常渲染空状态，不会报错。

内容的提问来源于stack exchange，提问作者Martin2236