在Next.js中使用getServerSideProps时避免有条件地调用React钩子

a2mppw5e 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(124)

我使用getServerSideProps()在服务器端获取数据，然后将其显示给用户：

export const getServerSideProps = async () => {
    // fetch some data...
    if (some_error_condition) {
        return { error: "Something happened" };
    }
    return { props: { num: 123 } };
};

export default function Component({ num, error }) {
    if (error) {
        return <>Error: {error}</>;
    }

    const [num, setNum] = useState(num); // <-- this hook is called conditionally

    return <>...</>;
}

在React组件中，一些钩子依赖于服务器端的数据。因此，我需要在使用不存在的数据调用这些钩子之前显示一个回退UI。
然而，这导致了这个（可理解的）错误：

Error: React Hook "useState" is called conditionally.

如何在Next. js/getServerSideProps()环境中最好地避免这种情况？

next.js

来源：https://stackoverflow.com/questions/75776613/avoid-calling-react-hooks-conditionally-when-using-getserversideprops-in-next-js

1条答案

按热度按时间

laawzig21#

您可以创建新组件并动态导入它

const SuccessComponent = ({ num }) => {
    const [num, setNum] = useState(num);

    return <>...</>;
}

import dynamic from 'next/dynamic';
const SuccessComponent = dynamic(() => import('SuccessComponent'))
export default function Component({ num, error }) {
    if (error) {
        return <>Error: {error}</>;
    }

    return <SuccessComponent num={num}/>
}

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

我来回答

在Next.js中使用getServerSideProps时避免有条件地调用React钩子

1条答案

相关问题

热门标签

最新问答