JavaScript报错'X不是函数或返回值不可迭代'，RTK Query问题排查

1. 普通Query Hook不能用数组解构 #

报错里的useSearchCustomersQuery是RTK Query生成的普通查询Hook，它返回的是包含data、isLoading等属性的对象，不是数组。如果你在某个组件里写了这种代码：

// 错误写法：把对象当数组解构
const [data] = useSearchCustomersQuery(someReq);

必然会触发这个错误——对象不可迭代，没法用数组解构语法。

正确用法是对象解构：

// 正确写法：提取对象里需要的属性
const { data, isLoading, error } = useSearchCustomersQuery(someReq);

2. POST请求应该用Mutation而非Query #

RTK Query里，query一般对应GET这类只读请求，mutation才是用来处理POST/PUT/DELETE这类会修改服务器状态的请求。你现在用builder.query做POST，虽然技术上能跑，但不符合设计规范，还可能埋下隐患。

修改searchApiSlice.js：

export const searchApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        searchCustomers: builder.mutation({ // 替换成mutation
            query: (reqBody) => ({
                url: '/customers/search',
                method: 'POST',
                body: reqBody
            })
        }),
    })
});

// 导出对应的mutation Hook，命名规则是use[EndpointName]Mutation
export const { useSearchCustomersMutation } = searchApiSlice;

如果需要按钮点击才触发请求（懒加载），Mutation的懒加载写法和你现在的useLazyQuery类似：

const [trigger, { data }] = useSearchCustomersMutation();

3. 检查Hook的导入是否正确 #

确认所有用到useSearchCustomersQuery的地方，都是从searchApiSlice正确导入的，没有拼写错误或者路径写错的情况。

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