reactjs - 我不想让未定义的值传递给组件

Question

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

如果我不想在 AgeComponent 道具的年龄中允许未定义，我该怎么办？

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;

Answer 1

刚用过！！

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

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

Answer 2

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

export default Index;

这样 TS 将推断ages传递给 props 时定义的