React自定义Hook返回数据报错：无法解构campaigns

你的核心问题是自定义Hook的返回值类型不一致：当campaigns未加载完成时返回<Spinner />组件（React元素），加载完成后返回包含campaigns的对象。这种情况下，当你尝试解构campaigns时，如果Hook返回的是Spinner元素，就会因为无法从React元素上解构出campaigns属性而报错。

正确的实现方式 #

React自定义Hook的返回值应该保持类型统一，通常我们会把加载状态、数据、错误等信息一起返回，组件渲染逻辑放在调用Hook的组件中，而非Hook内部。

修改你的useCreateActivity Hook：

export function useCreateActivity() {
  const { data: campaigns, isLoading, error } = trpc.campaign.getCampaigns.useQuery();

  // 返回统一结构的对象，包含加载状态、数据、错误
  return {
    campaigns,
    isLoading,
    error,
  };
}

在组件中使用Hook #

import { Spinner } from './Spinner';
import { useCreateActivity } from './useCreateActivity';

function YourComponent() {
  const { campaigns, isLoading, error } = useCreateActivity();

  if (isLoading) {
    return <Spinner />;
  }

  if (error) {
    return <div>加载失败：{error.message}</div>;
  }

  // 这里可以安全地使用campaigns
  return (
    <div>
      {campaigns.map(campaign => (
        <div key={campaign.id}>{campaign.name}</div>
      ))}
    </div>
  );
}

原写法报错原因 #

当campaigns不存在时，你的Hook返回的是<Spinner />（一个React元素对象，结构类似{ type: 'div', props: {}, ... }），此时你尝试解构const { campaigns } = useCreateActivity()，相当于从Spinner元素上取campaigns属性，自然得到undefined，如果后续代码直接使用这个undefined的campaigns（比如调用map方法），就会抛出Cannot read properties of undefined的错误。

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