Question

我正在尝试获取一些数据，并且通过文档似乎必须通过 getStaticProps 但在我的组件中记录道具时我一直得到一个空对象

如果您有任何想法，请随时告诉我

这是我的 _app.tsx

const Child:React.FC = ({ children }) => {
    
  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)

  return <div className={`${isDark ? "dark blackThemeColor test" : "white whiteThemeColor"}` + " min-h-screen font-body pr-0"} style={{height:'150vh'}}>{children}</div>;
}

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={ThemeStore}>
     <Application theme={theme}> 
        <Child>
          <Navigation {...pageProps} /> 
          <Component {...pageProps} />
        </Child>
      </Application> 
    </Provider>
  );
};
export default MyApp

和我的 navigation.tsx

interface NavProps {
    title: string;
    body: string;
    id: number;
    userId: number
}


const Navigation: React.FC<NavProps> = (props: NavProps) => {

    useEffect(() => {
        console.log(props)
    }, [])
    console.log(props)
    return (
        <>
            <div className={`w-full h-full `}>
                <p>{props.title}</p>
            </div>

        </>
    )
}

export default Navigation


export const getStaticProps: GetStaticProps = async (context) => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=6")
    const data: NavProps = await res.json();
    console.log(data)
    return {
        props: {
            data
        }
    }
}

Answer 1

根据您的评论，我认为 navigation.tsx 文件不在 pages 文件夹中。引用 docs：

<块引用>

getStaticProps 只能从页面导出。不能从非页面文件中导出。

因此，您必须将函数移动到要获取数据或在客户端执行的页面/路由。

带有 getStaticProps 和 typescript 的空对象

1 个答案: