javascript - 当我尝试从 react 查询中破坏数据时，我得到属性 'data' 在类型 'void' 上不存在

Question

当我尝试以这种方式破坏数据时，我遇到了 React 查询问题 const {data: getAllChannelSettingTypes} = useGetAllChannelSettingTypes();我遇到了这个错误 Property 'data' does not exist on type 'void'

可能返回用户查询有问题

const useGetAllChannelSettingTypes = () => {
  const {data: defaultSettingTypes} = useQuery(SETTING_TYPES, () =>
    Api.user.getSettingTypes(),
  );
  const userQueries = useQueries(
    defaultSettingTypes.map((type: any) => {
      return {
        queryKey: ['SETTING_VALUE', type.channelSettingTypeId],
        queryFn: () => Api.user.getSettingValues(type.channelSettingTypeId),
      };
    }),
  );
  console.log(userQueries);
  return userQueries;
};

Answer 1

根据documentation useQueries 返回一个数组:

The useQueries hook returns an array with all the query results.

数组中的每个元素都有这些属性:

• 状态:字符串
• isIdle: bool 值
• 正在加载: bool 值
• isSuccess: bool 值
• isError: bool 值
• isLoadingError: bool 值
• isRefetchError: bool 值
• data:TData，默认为undefined。
• dataUpdatedAt: number
• 错误:空 |错误
• 错误更新时间:编号
• isStale: bool 值
• isPlaceholderData: bool 值
• isPreviousData: bool 值
• isFetched: bool 值
• isFetchedAfterMount: bool 值
• isFetching: bool 值
• isRefetching: bool 值
• 失败计数:数量
• errorUpdateCount:数量
• refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise
• 删除:() => void

所以尝试像这样在循环中破坏数据:

for(let i = 0; i < userQueries.length; i++){
  const {data: getAllChannelSettingTypes} = useGetAllChannelSettingTypes()
  // do something with that data of the given query
}

如果您只对第一个结果感兴趣，您可以这样做:

const {data: getAllChannelSettingTypes} = useGetAllChannelSettingTypes()[0]