React调用getFormattedDate报错：date.toISOString不是函数

切换MongoDB数据源后，调用日期格式化函数时出现上述错误，此前使用本地虚拟expenses数组时一切正常。

相关代码 #

日期格式化函数：

export function getFormattedDate(date) {
    // return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate() +1}`
    return date.toISOString().slice(0, 10)
}

组件内使用：

<Text style={styles.textBase}>{getFormattedDate(date)}</Text>

问题原因 #

本地虚拟数据中，date是原生Date对象（通过new Date('2023-7-29')创建），但从MongoDB接口返回的date是字符串格式——虽然控制台打印的外观和Date对象的toString结果一致，但本质是字符串，没有toISOString这类Date对象的方法。

从你提供的expense-context.js代码看，连接MongoDB后的setExpenses方法中，原本用于转换日期的代码被注释掉了，这是直接诱因。

解决方案 #

方案1：获取数据时统一转换日期（推荐）

恢复setExpenses中注释的代码，将接口返回的日期字符串转为Date对象：

async function setExpenses() {
    try {
        const response = await axios.get('http://localhost:8082/expenses');
        // 转换所有expense的日期字段为Date对象
        const expensesWithValidDates = response.data.map((expense) => ({
            ...expense,
            date: new Date(expense.date), 
        }));
        dispatch({ type: 'SET_EXPENSES', payload: expensesWithValidDates });
    } catch (error) {
        console.error('Error fetching expenses:', error);
    }
}

同时，addExpense和updateExpense方法中，后端返回的新/更新后的expense日期也需要转换：

// 示例：修改addExpense
async function addExpense(expenseData) {
    try {
        const response = await axios.post('http://localhost:8082/expense', expenseData);
        const formattedExpense = {
            ...response.data,
            date: new Date(response.data.date)
        };
        dispatch({ type: 'ADD', payload: formattedExpense });
    } catch (error) {
        console.error('Error adding expense:', error);
    }
}

方案2：在格式化函数中兼容字符串输入

如果不想修改数据源，可以直接在getFormattedDate里处理字符串类型的日期，同时增加异常判断：

export function getFormattedDate(date) {
    // 先将字符串转为Date对象
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    // 校验是否为有效Date对象
    if (!(dateObj instanceof Date) || isNaN(dateObj.getTime())) {
        return '无效日期';
    }
    return dateObj.toISOString().slice(0, 10);
}

额外修复：修正Context中的setExpenses属性

你当前的Context value中，setExpenses错误赋值为expensesState，应该改为函数本身：

const value = {
    expenses: expensesState,
    addExpense: addExpense,
    deleteExpense: deleteExpense,
    updateExpense: updateExpense,
    setExpenses: setExpenses, // 改为setExpenses函数
};

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