Chrome控制台报Error .filter is not a function错误排查求助

问题场景 #

代码在WebStorm中无语法报错，但Chrome控制台抛出Error .filter is not a function错误。

相关代码 #

import {useMemo} from "react";

export const useSortedPosts = (posts, sort) => {
    return useMemo(() => {
        if (sort) {
            return [...posts].sort((a, b) => a[sort].localeCompare(b[sort]))
        }
        return posts;
    }, [sort, posts]);
}

export const usePosts = (posts, sort, query) => {
    const sortedPosts = useSortedPosts(posts, sort);

    return useMemo(() => {
        return sortedPosts.filter(post => post.title.toLowerCase().includes(query.toLowerCase()))
    }, [query, sortedPosts]);
}

错误原因 #

filter是数组专属方法，报错说明调用它的sortedPosts不是数组。根源是传入hook的posts初始值可能不是数组（比如undefined、null或者对象）——比如组件在异步加载数据前，posts未被初始化为数组，导致useSortedPosts返回非数组值，后续调用filter触发报错。

解决方案 #

方案1：确保传入的posts始终是数组

在使用该hook的组件中，初始化posts状态时设为空数组，而非undefined：

const [posts, setPosts] = useState([]);

方案2：在hook内部添加防御性检查

修改useSortedPosts，先校验posts是否为数组，非数组则转为空数组，从根源避免后续报错：

import {useMemo} from "react";

export const useSortedPosts = (posts, sort) => {
    return useMemo(() => {
        // 确保处理的是数组，非数组则返回空数组
        const validPosts = Array.isArray(posts) ? posts : [];
        if (sort) {
            return [...validPosts].sort((a, b) => a[sort].localeCompare(b[sort]))
        }
        return validPosts;
    }, [sort, posts]);
}

export const usePosts = (posts, sort, query) => {
    const sortedPosts = useSortedPosts(posts, sort);

    return useMemo(() => {
        return sortedPosts.filter(post => post.title.toLowerCase().includes(query.toLowerCase()))
    }, [query, sortedPosts]);
}

内容的提问来源于stack exchange，提问作者уксус412