React中SWR获取的数据无法作为props传递给子组件StyleCard问题求助

安全阿岳

2026-10-5

问题根因

SWR 首次渲染时data为undefined，此时传递给StyleCard的assets、styleNumber均为undefined，和你子组件定义的必填类型不匹配，会导致类型异常。
useMemo没有设置兜底值，当data?.assets不存在时，currentAssets返回值为undefined而非空数组，不符合子组件IAsset[]的类型要求。
父组件未做加载态判断，数据未返回时就渲染子组件，后续SWR拉取数据完成触发重渲染时，若子组件有React.memo等优化逻辑可能会跳过更新。

修复方案

给useMemo添加兜底返回值，保证currentAssets始终为数组类型：

const currentAssets = useMemo(() => {
  const result: IAsset[] = data?.assets?.map(x => {
    return {
          perspective_number: x.perspective.number,
          storage_url: x.file.storageUrl
        } as IAsset
  }) || []
  return result;
}, [data?.assets]);

父组件添加加载判断，等数据返回后再渲染子组件，避免传递undefined值：

return (
  <Stack spacing={6}>
     <Stack ml="100px" minWidth="480px" maxWidth="480px">
      {/* 仅当data存在时渲染StyleCard */}
      {data && (
        <StyleCard
           assets={currentAssets}
           styleNumber={data.styleNumber}
        />
      )}
      <Text>{data?.name}</Text>
     </Stack>
   </Stack>
);

可选优化：调整子组件接口兼容可选值，或添加props默认值：

export interface IStyleCard{
   assets?: IAsset[],
   styleNumber?: number
}

export function StyleCard({
  assets = [],
  styleNumber = 0
}: IStyleCard): JSX.Element {
  return (
    <Stack>
      <Text> Props Assets {JSON.stringify(assets)}</Text>
      <Text> Props styleNumber {styleNumber}</Text>
    </Stack>
  );
}