React Native传递Date对象作为Props后无法调用其方法的问题

你遇到的核心问题大概率是传递的item["date"]并非真正的Date对象，导致无法调用getDay()这类Date原型方法，以下是具体解决步骤：

1. 先确认item["date"]的实际类型 #

在父组件传递Props前，先打印类型和值，明确它到底是什么：

console.log(typeof item["date"], item["date"]);

• 如果输出是string（比如ISO格式字符串"2024-05-20T12:00:00.000Z"），说明是序列化后的日期字符串
• 如果输出是object但不是Date（比如{ date: "2024-05-20" }这类自定义对象），说明存储时Date被转成了普通对象

2. 把item["date"]转成真正的Date对象再传递 #

根据第一步的结果，修改父组件的Props传递：

• 情况1：如果是日期字符串

<Task
  text={item["text"]}
  date={new Date(item["date"])} // 转成Date对象
  time={item["time"]}
  reminder={item["reminder"]}
  completed={item["completed"]}
/>

• 情况2：如果是带date属性的普通对象

<Task
  text={item["text"]}
  date={new Date(item["date"].date)} // 取date属性转成Date对象
  time={item["time"]}
  reminder={item["reminder"]}
  completed={item["completed"]}
/>

3. 子组件中正确调用Date方法 #

转成Date对象后，直接调用方法即可，注意渲染时要转成可显示的字符串：

// 替换掉原来的console.log和注释的代码
<Text style={styles.itemText}>{date.getDay()}</Text>
// 或者用更友好的格式化方式，比如显示星期几
<Text style={styles.itemText}>
  {new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)}
</Text>

关于{...item['date']}无效的原因 #

Date对象的核心方法和属性都是不可枚举的，展开运算符...只能获取对象的可枚举属性，所以展开后拿不到任何有用的Date相关内容，完全没必要这么做。

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