Typescript 从服务器获取数据并加载状态

Question

我对打字稿很陌生，不知道如何最好地处理这种相当常见的情况。我获取数据并将其传递给模板组件：

const ProfilePage: FC = (): JSX.Element => {
  const { data, isDataLoading } = useProfileData();

  return (
    <ProfileTemplate
      data={!isDataLoading && data}
    />
  );
};

这是ProfileTemplate 组件

import { profile_data, Maybe } from '../api-client';

type ProfileProps = {
  data: Maybe<profile_data>;
}

export const ProfileTemplate: FC<ProfileProps> = ({ data }): JSX.Element => {
  ...
  <StaticField label="First Name" text={data.first_name} />
  <StaticField label="Last Name" text={data.last_name} />
  ...
}

这样调用它会导致类型 'false | Maybe<profile>' is not assignable to type 'Maybe<profile>'. 我可以删除首先检查 isDataLoading 的条件，但是然后我的 <StaticField> 组件中会出现 object is possibly null 错误。

first_name 和last_name 在数据库中可以为空或为空。虽然我意识到这不是导致object is possibly null 错误的原因，而是一个空的profile_data 对象，当时还没有从服务器返回数据。

我应该如何最好地处理这种情况？

My `<StaticField>` component looks like so: interface Props {
  label: string;
  text?: Maybe<string>;
}

export const StaticField: FunctionComponent<Props> = ({ label, text }): JSX.Element => {
  return (
    <Box>
      <Text color="gray.BlackCoral" className={classes.label}>
        {label}
      </Text>
      <Text>{text}</Text>
    </Box>
  );
};

Answer 1

你应该这样处理以确保ProfileTemplate 总是有data

{
  !isDataLoading && <ProfileTemplate data={data} />;
}

Answer 2

这行是问题

  data={!isDataLoading && data}

我建议你重构你的代码以像这样进行条件渲染

if (isDataLoading || !data) {
    return null
}
return (
    <ProfileTemplate data={data}/>
);

但是，您可以简单地将 data 属性替换为三元 提取到常量中总是一个好习惯

const data = isDataLoading ? data : undefined;
return (
    <ProfileTemplate data={data}/>
);

第二个选项仍然没有考虑当你有未定义的数据时应该呈现什么 所以你需要在 ProfileTemplate 中渲染 null

Answer 3

如果我理解正确的话，Maybe 似乎被定义为 type Maybe<T> = T | null。

所以，既然您希望data 存在或null，您可以将您的消费逻辑更改为

<ProfileTemplate
  data={isDataLoading ? null : data}
/>

这将消除错误'false | Maybe<profile>' is not assignable to type 'Maybe<profile>'.。出现此错误是因为在您现有的代码中 !isDataLoading && data 可以评估为 false 或 data 的任何类型。

其次，由于data 可以是null，使用它来访问data.first_name 可能是个问题。这就是 TypeScript 试图告诉你的。 “修复”它的一种方法是使用可选链接data?.first_name 告诉编译器您将访问first_name iff data 已定义。