我不想允许将未定义的值传递给组件

问题描述

我正在使用 swr。
swr 中的数据类型是 IAge|未定义。
我不想将 undefined 传递给 AgeComponent，所以我希望年龄的类型为 IAge。
由于年龄组件中不允许使用 undefined 输入'I年龄| undefined' 不能分配给类型 'IAge'。 类型“未定义”不可分配给类型“IAge”。t 错误

如果AgeComponent道具的年龄不允许undefined怎么办？

import useSWR from 'swr';
import { IAge } from 'domain/age_groups';

export const useAgeGroups = () => {
  const path = `age_groups`;
  const { data,error } = useSWR<IAge>(path);
  return {
    ages: data,agesLoading: !error && !data && data === undefined,agesError: error,};
};

const Index: FunctionComponent = () => {
  const { ages,agesLoading } = useAgeGroups();
  return (
    <>
      <div>
         {agesLoading && <div>loading</div>}
        <AgeComponent age={ages}/>
      </div>
    </>
  );
};

export default Index;

解决方法

刚用过！！

注意：！！不是运算符，它只是 !操作员两次

          const Index: FunctionComponent = () => {
          const { ages,agesLoading } = useAgeGroups();
          const defaultAge = 0; 
          return (
            <>
              <div>
                 {agesLoading && <div>loading</div>}
                <AgeComponent age={!!ages ? age : defaultAge}/>
              </div>
            </>
          );
        };

,

const Index: FunctionComponent = () => {
  const { ages,agesLoading } = useAgeGroups();
  return (
    <>
      <div>
         {agesLoading && <div>loading</div>}
        {ages && <AgeComponent age={ages}/>}
      </div>
    </>
  );
};

export default Index;

这样 TS 会推断 ages 是在传递给 props 时定义的