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

Question

向订单页面添加PayPal按钮的问题：

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

控制台中：

"上述错误发生在组件中：
的e(https://www.paypal.com/sdk/js?client-id='#my client id'(
PayPalButton(http://localhost:3000/static/js/0.chunk.js:437215:5)">
在终端中写入时"npm i react-paypal-button-v2"：
npm ERR！代码ERESOLVE
npm ERR！ERESOLVE无法解决依赖树
npm ERR
npm错误！解决时：sklep@0.1.0
npm ERR！找到：react@17.0.1
npm ERR！node_modules/areact
npm ERR！react@"^17.0.1〃；从根开始项目
npm ERR
npm错误！无法解析依赖项：
npm ERR！对等反应@"^0.14.6||15.x.x||16.x.x"；从…起react-paypal-button-v2@2.6.2
npm ERR！node_modules/rectat-paypal-button-v2
npm ERR
react-paypal-button-v2@"^2.6.2"；来自根项目

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>
)}

Answer 1

我在这个项目中也遇到了同样的问题。您有一个比Paypal按钮要求的更新版本的react。您只需要在package.json文件中更改react.js和react-dom.js版本。我写了"；16.14.0"；它是有效的。