0

我对父/子元素之间的数据传递有疑问。父元素 StylePage 通过SWR检索数据，SWR 可以毫无问题地检索数据，并且应用程序能够使用文本显示它。问题是它没有被传递给子元素（StyleCard）。也是如此currentAssets。我在这里错过了什么可能导致道具没有被传递给 StyleCard？

// StylePage
export default function StylePage(): JSX.Element {
  const { data } = useSWR(`/api/styles/style-number/${styleNumber}`);

  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]);

  return (
    <Stack spacing={6}>
       <Stack ml="100px" minWidth="480px" maxWidth="480px">

        <StyleCard
           assets={currentAssets}               // Has value but doesn't display
           styleNumber={data?.styleNumber} />   // Has value but doesn't display 
        <Text>{data?.name}</Text>               // Displays value 

       </Stack>
     </Stack>
  );
}

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

export function StyleCard(
  props: IStyleCard
): JSX.Element {

  return (
    <Stack>
      <Text> Props Assets {JSON.stringify(props.assets)}</Text> // Props.assets is empty
      <Text> Props styleNumber {props.styleNumber}</Text>       // props.styleNumber is blank
    </Stack>
  );
}

编辑：有一个围绕顶层组件的全局配置SWRConfig （源） 。这就是 StylePage 中未指定 fetcher 的原因。还修复了代码示例中的错字。

    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (url) =>
          axios
            .get(url)
            .then((res) => res.data),
      }}
    >

    ... 

    </SWRConfig>
4

0 回答 0