Next.js:文档未定义 [英] Next.js: document is not defined

问题描述

我正在尝试创建一个人们可以付款的付款表格，但我一直收到此错误.

<块引用>

文档未定义

我正在使用 Next.js.请看我下面的代码:

从反应"导入反应；从'react-stripe-elements'导入{Elements，StripeProvider}；从'../../components/Payment/CheckoutForm'导入CheckoutForm；从下一个/路由器"导入 { useRouter };var stripe_load = () =>{var aScript = document.createElement('script');aScript.type = 'text/javascript';aScript.src = "https://js.stripe.com/v3/";document.head.appendChild(aScript);aScript.onload = () =>{};};功能支付({主机}){const key = host.includes('localhost') ?'测试':'t';条纹加载()；const 路由器 = useRouter();返回 (<div className=支付主体"><StripeProvider apiKey={key}><元素><CheckoutForm planid={router.query.id}/></元素></StripeProvider><br/><br/><p>由 Stripe 提供支持</p>

);};Payment.getInitialProps = 异步 ctx =>{返回 { 主机:ctx.req.headers.host }};出口默认付款

解决方案

我认为，在服务器渲染模式下，文档是未定义的.您应该能够在类生命周期方法或 useEffect 中使用它

import React, {useEffect} from "react";从'react-stripe-elements'导入{Elements，StripeProvider}；从'../../components/Payment/CheckoutForm'导入CheckoutForm；从下一个/路由器"导入 { useRouter };var stripe_load = () =>{var aScript = document.createElement('script');aScript.type = 'text/javascript';aScript.src = " https://js.stripe.com/v3/";document.head.appendChild(aScript);aScript.onload = () =>{};};功能支付({主机}){const key = host.includes('localhost') ?'测试':'t';useEffect(() => {var aScript = document.createElement('script');aScript.type = 'text/javascript';aScript.src = " https://js.stripe.com/v3/";document.head.appendChild(aScript);aScript.onload = () =>{};}, [])//stripe_load();const 路由器 = useRouter();返回 (<div className="Payment Main"><StripeProvider apiKey={key}><元素><CheckoutForm planid={router.query.id}/></元素></StripeProvider><br/><br/><p>由 Stripe 提供支持</p>

);};Payment.getInitialProps = 异步 ctx =>{返回 { 主机:ctx.req.headers.host }};出口默认付款

I am trying to create a payment form where people can pay but I keep getting this error.

document is not defined

I'm using Next.js. Please see my code below:

import React from "react";
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from '../../components/Payment/CheckoutForm';
import { useRouter } from 'next/router';


var stripe_load = () => {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " https://js.stripe.com/v3/";

    document.head.appendChild(aScript);
    aScript.onload = () => {

    };
};

function Payment({host}) {
    const key = host.includes('localhost') ? 'test' : 't';

    stripe_load();

    const router = useRouter();

    return (
        <div className="Payment Main">
            <StripeProvider apiKey={key}>
                <Elements>
                    <CheckoutForm planid={router.query.id}/>
                </Elements>
            </StripeProvider>
            <br/>
            <br/>
            <p>Powered by Stripe</p>
        </div>
    );
};


Payment.getInitialProps = async ctx => {
    return { host: ctx.req.headers.host }
};

export default Payment

解决方案

I think, in server rendering mode, the document is undefined. You should be able to use it inside class lifecycle methods or useEffect

import React, {useEffect} from "react";
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from '../../components/Payment/CheckoutForm';
import { useRouter } from 'next/router';


var stripe_load = () => {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " https://js.stripe.com/v3/";

    document.head.appendChild(aScript);
    aScript.onload = () => {

    };
};

function Payment({host}) {
    const key = host.includes('localhost') ? 'test' : 't';

    useEffect(() => {
      var aScript = document.createElement('script');
       aScript.type = 'text/javascript';
       aScript.src = " https://js.stripe.com/v3/";

       document.head.appendChild(aScript);
       aScript.onload = () => {

       };
    }, [])
    //stripe_load();

    const router = useRouter();

    return (
        <div className="Payment Main">
            <StripeProvider apiKey={key}>
                <Elements>
                    <CheckoutForm planid={router.query.id}/>
                </Elements>
            </StripeProvider>
            <br/>
            <br/>
            <p>Powered by Stripe</p>
        </div>
    );
};


Payment.getInitialProps = async ctx => {
    return { host: ctx.req.headers.host }
};

export default Payment

这篇关于Next.js:文档未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！