RTK Query调用报错：尝试解构非可迭代实例问题排查

报错原因 #

RTK Query的useQuery系列钩子（比如你这里的useLocationQuery）返回的是单一对象，而非数组。你用数组解构语法[getcitycode, { ... }]去解析它，必然触发“尝试解构非可迭代实例”的错误——因为普通对象没有默认迭代器，无法按数组方式解构。

注意：只有RTK Query的useMutation钩子才会返回数组（第一个元素是触发函数，第二个是状态对象），useQuery钩子的所有方法、状态都封装在同一个返回对象中。

解决方案 #

1. 修正解构方式（核心修复） #

将数组解构改为对象解构，把返回对象中的refetch方法重命名为你需要的getcitycode：

// 错误写法
// const [getcitycode, { isLoading, error, data, isSuccess, isError }] = useLocationQuery();

// 正确写法
const { refetch: getcitycode, isLoading, error, data, isSuccess, isError } = useLocationQuery();

2. 调整手动触发逻辑 #

调用refetch（即重命名后的getcitycode）时，需将查询参数放在query字段中传递：

const getLocationDetails = async () => {
  const queryItems = { latitude: lat, longitude: long };
  await getcitycode({ query: queryItems });
};

3. 优化端点URL拼接（可选） #

你的端点定义中URL存在换行空格，可能导致请求异常，建议调整为无空格的拼接方式：

location: builder.query({
  query: (queryItems) => {
    console.log('qitems', queryItems);
    return {
      url: `https://revgeocode.search.hereapi.com/v1/revgeocode?at=${queryItems.latitude},${queryItems.longitude}&lang=en-US&apiKey=apikey`,
      method: 'GET',
    };
  },
});

4. 关闭自动查询（可选） #

如果希望组件挂载时不自动触发查询，仅通过getcitycode手动触发，可在调用钩子时添加skip: true参数：

const { refetch: getcitycode, isLoading, error, data, isSuccess, isError } = useLocationQuery({
  skip: true,
});

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