React中fetchJobs函数排序与状态设置问题求助

先看修正后的完整代码：

const fetchJobs = async (userId: string) => {
    setJobs([]);

    try {
        const response = await axios.post("/api/fetch/fetchMany?type=jobs", {
            user_id: userId
        });

        if (!response?.data || response.data.length === 0) {
            setJobs([]);
            return;
        }

        // 按startDate从新到旧排序
        const sortedJobs = [...response.data].sort((a: Job, b: Job) => {
            return new Date(b.startDate) - new Date(a.startDate);
        });

        setJobs(sortedJobs);
    } catch (error) {
        // 建议添加错误处理
        console.error("获取工作列表失败:", error);
        setJobs([]);
    }
};

错误原因与修复细节 #

1. 排序函数类型错误的修复 #

原代码把排序函数的参数a和b标注为Date类型，但它们实际是Job对象，这直接导致'startDate' does not exist on type 'Date'的报错。

修复：

• 将参数类型改为Job，确保能正确访问startDate属性。
• 若要实现从新到旧排序，需用new Date(b.startDate) - new Date(a.startDate)（从旧到新则调换a、b顺序）。

2. 无法赋值给SetStateAction<Job[]>的修复 #

原代码存在两个关键逻辑错误：

• 错误地给数组的sort属性赋值（response.data.sort = (...) => {...}），而非调用sort()方法。Array.sort()是实例方法，必须通过括号调用才会执行排序并返回排序后的数组。
• 排序函数的返回值被错误标注为Job[]，但sort要求排序函数返回数字（负数表示a排在b前，正数表示b排在a前，0表示相等），而非数组。

额外优化：

• 用[...response.data]创建原数组副本，避免直接修改接口返回的原始数据（sort方法会原地修改数组）。
• 将await与.then()混合写法改为try/catch，代码更简洁且便于统一处理错误。
• 用response?.data替代response == null，更符合TypeScript可选链语法规范。

补充说明 #

你的Job类型定义和useState<Job[]>的状态声明完全正确，无需修改状态的可赋值类型，问题全部源于排序逻辑的写法错误。

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