React Native中TypeError: date.toISOString未定义对象问题求助

你遇到的 TypeError: undefined is not an object (evaluating 'date.toISOString') 本质是传给ExpenseItem组件的date属性为undefined，而课程仓库的代码中所有expense数据都包含有效的date字段，因此不会报错。以下是具体排查和修复步骤：

1. 核对数据源 #

首先检查你的expense列表数据（比如模拟数据、上下文存储的数据）：

• 确认每一条expense都包含date字段，且值是合法的Date对象、可转换为Date的字符串（如"2024-05-20"）或时间戳。
• 对比课程仓库中的初始数据（比如dummy-expenses.js），看是否你的数据结构遗漏了date字段，或者字段名拼写错误（比如写成Date而非date）。

2. 检查数据传递链路 #

从渲染ExpenseItem的FlatList环节入手，确认属性传递是否正确：

// 示例：ExpensesList组件中的FlatList代码
<FlatList
  data={expenses}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <ExpenseItem
      id={item.id}
      description={item.description}
      amount={item.amount}
      date={item.date} // 这里必须确保item.date存在且有效
    />
  )}
/>

如果是从表单添加新expense，还要检查表单提交逻辑：是否在创建新expense时正确生成了date（比如用new Date()），而非漏掉该字段。

3. 防御性代码修复 #

为了避免后续类似崩溃，可以给工具函数和组件增加容错处理：

修改date.js中的getFormattedDate： #

export function getFormattedDate(date){
  if (!date) return '无日期'; // 或空字符串、默认日期
  // 额外确保传入值是合法Date对象
  const validDate = new Date(date);
  return isNaN(validDate.getTime()) ? '无效日期' : validDate.toISOString().slice(0, 10);
}

或在ExpenseItem中提前判断： #

<Text style={styles.textBase}>
  {date ? getFormattedDate(date) : '无日期'}
</Text>

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