Vue响应式数据调用.filter报错：.filter is not a function求助

问题分析 #

你遇到的TypeError: localState.shippingMethods.filter is not a function错误，核心原因是初始化时shippingMethods的类型与后续数据不匹配，同时代码中存在变量引用错误。

修复方案 #

修改两处关键代码即可解决问题：

const shipping_estimate = computed(() => {
    // 根据选中的配送方式过滤数组
    return localState.shippingMethods.filter(el => {
        // 请根据实际业务调整匹配字段：
        // 如果selectedShippingMethod存储的是配送方式ID，用el.id匹配
        return el.id === localState.selectedShippingMethod;
        // 如果是匹配价格，用下面的逻辑（注意价格可能重复）
        // return el.price === localState.selectedShippingMethod;
    });
});

const localState = reactive({
    removingCartItem: false,
    paymentProcessing: false,
    stripe: {},
    cardElement: {},
    customer: {},
    orderError: null,
    loading: false,
    selectedShippingMethod: null,
    shippingMethods: [] // 初始化为空数组，而非对象
}); 

onMounted(async () => {
    localState.loading = true;

    try {
        const response = await axios.get("/api/shipping-method");
        localState.shippingMethods = response.data.data;
    } catch (err) {
        console.error("获取配送方式失败:", err);
    } finally {
        localState.loading = false;
    }
});

关键修复点说明 #

1. 修正初始值类型
   你最初将shippingMethods初始化为{}对象，但filter是数组专属方法。组件初始化阶段，computed会立即执行，此时shippingMethods还是对象，调用filter自然报错。将初始值改为空数组[]，能保证无论数据是否加载完成，shippingMethods始终是数组类型，filter可正常调用。

2. 修正变量引用逻辑
   原代码中shippingMethods[selectedShippingMethod]未从localState中读取变量，应改为localState.selectedShippingMethod。同时建议确认过滤逻辑：如果selectedShippingMethod是配送方式的唯一标识（如ID），优先用标识匹配而非价格（价格存在重复风险）。

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