NEXTJS：getServerSideProps无法在组件中工作

wr98u20j 于 2023-05-22 发布在其他

关注(0)|答案(3)|浏览(352)

下面是位于“Pages/home.js”的代码。// localhost：3000/home

import axios from 'axios';
    import Section1 from '../components/home-sections/section-1';
    
    const Homepage = ({ show }) => {
        const Html = JSON.parse(show.response.DesktopHTML);
        const renderSection = () => {
            return Html.map((itemData,index)=>{
                return(<div key={index}>{itemData.DisplayName}</div>)
            })
        }
    
        return(
            <div>
                { renderSection()}
                <Section1 />
            </div>
        )
    }
    
    export const getServerSideProps = async ({ query }) => {
     
      try {
        const response = await axios.get(
          `https://api.example.com/getHomeSection?title=Section 1`
        );
        
        return {
          props: {
            show: response.data,
          },
        };
      } catch (error) {
        return {
          props: {
            error: error.error,
          },
        };
      }
    };
    
    export default Homepage;

现在，我将相同的代码添加到section-1.js中，此文件位于“components/home-sections/section-1.js”
现在，getServerSideProps在home.js中工作正常，但在section-1.js中不工作。

Error: TypeError: show is undefined in section-1.js

next.js

来源：https://stackoverflow.com/questions/64136025/nextjs-getserversideprops-not-working-into-components

3条答案

按热度按时间

9lowa7mx1#

不能在非页面组件中使用getServerSideProps。您可以将prop从Home传递到HomeSection，也可以创建一个上下文，以便可以从组件树全局使用该值
getServerSideProps只能从页面导出。不能从非页面文件导出。
https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2

赞(0）回复(0）举报 2023-05-22

x8diyxa72#

getServerSideProps只能从页面组件导出。它不会在导入到页中的组件上运行。
但是，您可以从返回props的组件导出一个函数，然后从页面的getServerSideProps函数调用该函数。
1.在组件上创建getServerSideProps函数。

// @components/MyComponent.tsx
import { GetServerSidePropsContext } from 'next';

function MyComponent(props: IMyComponentProps) {
    return (<div>MyComponent</div>;)
}

MyComponent.getServerSideProps = async (context: GetServerSidePropsContext): Promise<{ props: IMyComponentProps }> => {
    return { props: { ... } };
}

export default MyComponent;

1.在页面的getServerSideProps函数中，调用组件的getServerSideProps函数，并将组件中的props与页面中的props合并。

// mypage.tsx
import MyComponent from '@components/MyComponent';

const Page: NextPageWithLayout = (props: IIndexPageProps) => {
    return <MyComponent />;
}

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{ props: IIndexPageProps }> {
    let componentServerSideProps = await MyComponent.getServerSideProps(context);
    let otherServerSideProps = { props: { ... } };

    return {
        props: {
            ...componentServerSideProps.props,
            ...otherServerSideProps.props
        }
    };
}

赞(0）回复(0）举报 2023-05-22

iq3niunx3#

getServerSideProps不能在组件中工作，它只需要在页面上实现，如果你使用的是下一个.js-13应用目录，它也不能在那里工作，你需要使用pages目录
在app目录中，您只需要在第一行为客户端组件写入use client，而为服务器组件留空

赞(0）回复(0）举报 2023-05-22