Reactjs 错误：在未安装的组件上找不到节点

将PayPal按钮添加到OrderPage时出现问题：

错误：在未安装的组件上找不到节点

在控制台中：

“上述错误发生在组件中：
位于e （客户端id'）
位于 付款按钮(http://localhost:3000/static/js/0.chunk.js:437215:5)"
在终端“npm i react-paypal-button-v2”中写入时：
npm ERR！代码ERESOLVE
npm ERR！无法解决的问题 依赖关系树
npm错误
npm错误！在解决以下问题时： sklep@0.1.0
npm错误！发现：react@17.0.1
npm错误！ 节点\u模块/react
npm错误！从根目录反应“^17.0.1” 项目
npm错误
npm错误！无法解析依赖项：
npm错误！同伴反应“^0.14.6| | 15.x.x| | | 16.x.x”来自 反应贝宝按钮-v2@2.6.2
npm错误！ node_modules/react-paypal-button-v2
npm ERR
根项目中的react-paypal-button-v2@“^2.6.2”

从“React”导入React
从“react redux”导入{useDispatch，useSelector}；
从“react router dom”导入{Link}；
从“react”导入{useffect}；
从“./组件/加载箱”导入加载箱；
从“./组件/MessageBox”导入MessageBox；
从“./actions/orderActions”导入{detailsOrder}；
从“./组件/LoadingBoxWhite”导入LoadingBoxWhite；
从“./components/Navbar/SecondaryNavbar”导入{SecondaryNavbar}”；
从“react”导入{useState}；
从“axios”导入axios；
从“react-paypal-button-v2”导入{PayPalButton}；
导出默认函数OrderPage（道具）{
const orderId=props.match.params.id；
const[sdkReady，setSdkReady]=使用状态（false）；
const orderDetails=useSelector（（state）=>state.orderDetails）；
const{order，loading，error}=orderDetails；
const dispatch=usedpatch（）；
useffect（（）=>{
const addPayPalScript=async（）=>{
const{data}=wait axios.get（'/api/config/paypal'）；
const script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=`https://www.paypal.com/sdk/js?client-id=${data}`；
script.async=true；
script.onload=（）=>{
setSdkReady（正确）；
};
document.body.appendChild（脚本）；
};
if（！order | |（order&&order.\u id！==orderId））{
调度（detailsOrder（orderId））；
}否则{
如果（！order.isPaid）{
如果（！window.paypal）{
addPayPalScript（）；
}否则{
setSdkReady（正确）；
}
}
}
}，[dispatch，orderId，sdkReady，order]）；
const successPaymentHandler=（）=>{
//
}
const setDate=（日期）=>{
新的Intl.DateTimeFormat（'en-US'，{年：'数字'，月：'两位数'，日：'两位数'，小时：'两位数'，分钟：'两位数'，秒：'两位数'}）。格式（日期）；
}
返回加载？（）：错误？（{error}）：(


扎莫·维尼亚先生：{顺序.\u id}
多斯塔瓦

Imięi Nazwisko:{order.shippingAddress.name}

地址Wysyłki:{order.shippingAddress.address}，
{order.shippingAddress.city}，
{order.shippingAddress.postalCode}，
{order.shippingAddress.country}

{order.isDelivered？Dostarczono:{setDate（order.deliveredAt）}:Zamówienie Niedostarczone}


梅托达·帕特诺·西

{order.paymentMethod}


{order.isPaid？Zapłacono:{setDate（order.paidAt）}：Zamówienie Nieopłacone}


扎莫维尼

{order.orderItems.map（（项）=>(

{item.name}
{item.qty}x{item.price}zł={item.qty*item.price}zł


))}





Podsumowanie Zamówienia


苏玛
{order.itemsPrice}zł


科兹特多斯塔维
{order.shippingPrice}zł


import React from 'react'
import {useDispatch, useSelector} from "react-redux";
import {Link} from "react-router-dom";
import {useEffect} from "react";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import {detailsOrder} from "../actions/orderActions";
import LoadingBoxWhite from "../components/LoadingBoxWhite";
import {SecondaryNavbar} from "../components/Navbar/secondaryNavbar";
import {useState} from "react";
import axios from "axios";
import {PayPalButton} from "react-paypal-button-v2";

export default function OrderPage (props) {

const orderId = props.match.params.id;
const [sdkReady, setSdkReady] = useState(false);
const orderDetails = useSelector((state) => state.orderDetails);
const { order, loading, error } = orderDetails;
const dispatch = useDispatch();


useEffect(() => {
    const addPayPalScript = async () => {
            const { data } = await axios.get('/api/config/paypal');
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = `https://www.paypal.com/sdk/js?client-id=${data}`;
            script.async = true;
            script.onload = () => {
                setSdkReady(true);
            };
            document.body.appendChild(script);
    };
    if (!order || (order && order._id !== orderId)) {
        dispatch(detailsOrder(orderId));
    } else {
        if (!order.isPaid) {
            if (!window.paypal) {
                addPayPalScript();
            } else {
                setSdkReady(true);
            }
        }
    }
}, [dispatch, orderId, sdkReady, order]);

const successPaymentHandler = () => {
    //
}


const setDate = (date) => {
    new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(date);
}


return loading ? (<LoadingBoxWhite/>) : error ? (<MessageBox variant="danger">{error}</MessageBox>) : (
    <div>
        <SecondaryNavbar/>
        <div className="container">
            <div className="row top">
                <div className="col-2">
                    <ul>
                        <li>
                            <div className="card card-body">
                                <h1 style={{marginBottom: '10px', color: 'black'}}>Numer Zamówienia: {order._id}</h1>
                                <h2>Dostawa</h2>
                                <p>
                                    <strong>Imię i Nazwisko: </strong> {order.shippingAddress.name} <br/>
                                    <strong>Adres Wysyłki: </strong> {order.shippingAddress.address}, &nbsp;
                                    {order.shippingAddress.city}, &nbsp;
                                    {order.shippingAddress.postalCode}, &nbsp;
                                    {order.shippingAddress.country}
                                </p>

                                {order.isDelivered ? <MessageBox variant="success">Dostarczono: {setDate(order.deliveredAt)}</MessageBox>: <MessageBox variant="danger">Zamówienie Niedostarczone</MessageBox>}
                            </div>
                        </li>
                        <li>
                            <div className="card card-body">
                                <h2>Metoda Płatności</h2>
                                <p>
                                    {order.paymentMethod} <br/>
                                </p>
                                {order.isPaid ? <MessageBox variant="success">Zapłacono: {setDate(order.paidAt)}</MessageBox>: <MessageBox variant="danger">Zamówienie Nieopłacone</MessageBox>}
                            </div>
                        </li>
                        <li>
                            <div className="card card-body">
                                <h2>Zamówienie</h2>
                                <ul>
                                    {order.orderItems.map((item) => (
                                        <li key={item.product}>
                                            <div className="row  borderwhite">
                                                <div>
                                                    <Link to={`/product/${item.product}`}> <img
                                                        className="small hoverbig"
                                                        src={process.env.PUBLIC_URL + '/images/' + item.image}
                                                        alt={item.name}
                                                    /></Link>
                                                </div>
                                                <div className="min-30">
                                                    <h2><Link to={`/product/${item.product}`} className="hoverred blacked" >{item.name}</Link></h2>
                                                </div>
                                                <div className="blacked"><p>{item.qty} x {item.price} zł = {item.qty * item.price} zł</p></div>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className="col-1">
                    <div className="card card-body">
                        <ul>
                            <li>
                                <h2>Podsumowanie Zamówienia</h2>
                            </li>
                            <li>
                                    <div className="row">
                                        <div>Suma</div>
                                        <div>{order.itemsPrice} zł</div>
                                    </div>
                            </li>
                            <li>
                                <div className="row">
                                    <div>Koszt Dostawy</div>
                                    <div>{order.shippingPrice} zł</div>
                                </div>
                            </li>
                            <li>
                                <div className="row">
                                    <div>VAT</div>
                                    <div>{order.taxPrice} zł</div>
                                </div>
                            </li>
                            <li>
                                <div className="row">
                                    <div><strong>Razem</strong></div>
                                    <div><strong> {order.totalPrice} zł</strong></div>
                                </div>
                            </li>
                            {!order.isPaid && (
                                <li>
                                    {!sdkReady ? (
                                        <LoadingBox/>
                                    ) : (
                                        <PayPalButton amount={order.totalPrice} onSuccess={successPaymentHandler}/>
                                    )}
                                </li>
                            )}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

)}