Javascript 如果用户选择了货到付款，我想删除paypal支付按钮

我添加了一个使用paypal支付的选项，但如果选择的paymentMethod是货到付款，我想删除该按钮。一切都很好，但如果用户选择货到付款方式为

paymentMethod

，我只想删除paypal支付选项。代码如下：

import React, { useState, useEffect } from 'react'
import { Button, Col, Row, ListGroup, Image, Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { PayPalButton } from 'react-paypal-button-v2'
import Message from '../components/Message'
import Loader from '../components/Loader'
import { getOrderDetails, payOrder } from '../actions/orderActions'
import { ORDER_PAY_RESET } from '../constants/orderConstants'


const OrderScreen = ({ match }) => {
    const orderId = match.params.id
    const dispatch = useDispatch()

const [SdkReady, setSdkReady] = useState(false)

const orderDetails = useSelector(state => state.orderDetails)
const { order, error, loading } = orderDetails

const orderPay = useSelector(state => state.orderPay)
const { loading: loadingPay, success: successPay } = orderPay



if(!loading && !error) {
    order.itemsPrice = order.orderItems.reduce((acc, item) => acc + item.price * item.qty, 0).toFixed(2)
}
    

const addPayPalScript = () =>{
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://www.paypal.com/sdk/js?client-id=AUBXXXXXXXXXXXXXXXXXXXXXXXEAz9sp6B2QkSR1q7Ia-QXXXXXXXXXXXXXXXXX6s'
    script.async = true
    script.onload = () => {
        setSdkReady(true)
    }
    document.body.appendChild(script)
}

useEffect(() => {
    if (!order || successPay || order._id !== Number(orderId)) {
        dispatch({ type:ORDER_PAY_RESET })
        dispatch(getOrderDetails(orderId))
    } else if(!order.isPaid){
        if(!window.paypal) {
            addPayPalScript()
        } else {
            setSdkReady(true)
        }
    }
}, [dispatch, order, orderId, successPay])


 
const successPaymentHandler = (paymentResult) => {
    dispatch(payOrder(orderId, paymentResult))
}

return loading ? (
    <loading/>
) : error ? (
    <Message variant='secondary'>{error}</Message>
) : (
    <div>
        <h1>Order: {order._id}</h1>
        <Row>
            <Col md={8}>
                <ListGroup variant='flush'>
                    <ListGroup.Item>
                        <h2>Shipping Address</h2>

                        <p><strong>Name: </strong>{order.user.name}</p>
                        <p><strong>Email: </strong><a href={`mailto:${order.user.email}`}>{order.user.email}</a></p>
                        <p><strong>Phone Number: </strong>{order.shippingAddress.phoneNumber}</p>

                        <p>
                            <strong>Shipping: </strong>
                            {order.shippingAddress.address}, {order.shippingAddress.city},
                            {' '}
                            {order.shippingAddress.postalCode},
                            {' '}
                            {order.shippingAddress.country}
                        </p>

                        {order.isDelivered ? (
                            <p className="text-center">
                            <Message variant='primary'>Delivered on {order.deliveredAt}</Message>
                            </p>
                        ) : (
                            <p className="text-center">
                            <Message variant='warning'>Order Confirmed, Your Order will Reach You Soon</Message>  
                            </p>   
                        )}

                    </ListGroup.Item>

                    <ListGroup.Item>
                        <h2>Payment Method</h2>
                        <p>
                            <strong>Method: </strong>
                            {order.paymentMethod}
                        </p>

                        {order.isPaid ? (
                            <p className="text-center">
                            <Message variant='primary'>Paid on {order.paidAt}</Message>
                            </p>
                        ) : (
                            <p className="text-center">
                            <Message variant='warning'>Pay For The Product Once The Delivery Has Been Completed {order.paidAt}</Message>  
                            </p>   
                        )}

                    </ListGroup.Item>

                    <ListGroup.Item>
                        <h2>Ordered Items</h2>
                        {order.orderItems.length === 0 ? <Message variant='secondary'>
                            Your Order Is Empty
                        </Message> :(
                            <ListGroup variant='flush'>
                                {order.orderItems.map((item, index) => (
                                    <ListGroup.Item key={index}>
                                        <Row>
                                            <Col md={2}>
                                                <Image src={item.image} alt={item.name} fluid rounded />
                                            </Col>

                                            <Col>
                                                <Link to={`/product/${item.product}`}>{item.name}</Link>
                                            </Col>

                                            <Col md={4}>
                                                {item.qty} X ${item.price} = ${(item.qty * item.price).toFixed(2)}
                                            </Col>



                                        </Row>
                                    </ListGroup.Item>
                                ))}
                            </ListGroup>
                        )}
                    </ListGroup.Item>
                </ListGroup>
            </Col>

            <Col md={4}>
                <Card>
                    <ListGroup variant='flush'>
                        <ListGroup.Item>
                            <h2>Order Summary</h2>
                        </ListGroup.Item>

                        <ListGroup.Item>
                            <Row>
                                <Col>Items:</Col>
                                <Col>${order.itemsPrice}</Col>
                            </Row>
                        </ListGroup.Item>

                        <ListGroup.Item>
                            <Row>
                                <Col>Shipping:</Col>
                                <Col>${order.shippingPrice}</Col>
                            </Row>
                        </ListGroup.Item>

                        {/* <ListGroup.Item>
                            <Row>
                                <Col>Tax:</Col>
                                <Col>${order.taxPrice}</Col>
                            </Row>
                        </ListGroup.Item> */}

                        <ListGroup.Item>
                            <Row>
                                <Col>Total:</Col>
                                <Col>${order.totalPrice}</Col>
                            </Row>
                        </ListGroup.Item>


                        {!order.isPaid && (
                            <ListGroup.Item>
                                {loadingPay && <Loader/>}

                                {!SdkReady ? (
                                    <Loader/>
                                ) : (
                                    <PayPalButton
                                        amount={order.totalPrice}
                                        onSuccess={successPaymentHandler}
                                    />
                                )}
                            </ListGroup.Item>
                        )}



                    </ListGroup>
                </Card>

                <ListGroup.Item className='my-3'>
                        <h3>Delivery Instruction</h3>
                        <p>
                            <strong>Instruction: </strong>
                            {order.shippingAddress.note}
                        </p>
                </ListGroup.Item>

            </Col>
        </Row>
    </div>
)
}

export default OrderScreen

import React，{useState，useffect}来自“React”
从“react bootstrap”导入{按钮、列、行、列表组、图像、卡}
从“react router dom”导入{Link}
从“react redux”导入{useDispatch，useSelector}
从'react-paypal-button-v2'导入{PayPalButton}
从“../components/Message”导入消息
从“../components/Loader”导入加载程序
从“../actions/orderActions”导入{getOrderDetails，payOrder}
从“../constants/orderConstants”导入{ORDER_PAY_RESET}
常量OrderScreen=（{match}）=>{
const orderId=match.params.id
const dispatch=usedpatch（）
const[SdkReady，setSdkReady]=useState（false）
const orderDetails=useSelector（state=>state.orderDetails）
const{order，error，loading}=orderDetails
const orderPay=useSelector（state=>state.orderPay）
const{loading:loadingPay，success:successPay}=orderPay
如果（！加载&&！错误）{
order.itemsPrice=order.orderItems.reduce（（acc，item）=>acc+item.price*item.qty，0）。toFixed（2）
}
常量addPayPalScript=（）=>{
常量脚本=document.createElement（'script'）
script.type='text/javascript'
script.src=https://www.paypal.com/sdk/js?client-id=AUBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXEAZ9SP6B2QKSR1Q7IA-QXXXXXXXXXXXXXXXXX6s'
script.async=true
script.onload=（）=>{
setSdkReady（真）
}
document.body.appendChild（脚本）
}
useffect（（）=>{
如果（！order | | | successPay | | order._id！==编号（orderId））{
分派（{type:ORDER\u PAY\u RESET}）
调度（getOrderDetails（orderId））
}否则，如果（！order.isPaid）{
如果（！window.paypal）{
addPayPalScript（）
}否则{
setSdkReady（真）
}
}
}，[dispatch，order，orderId，successPay]）
const successPaymentHandler=（paymentResult）=>{
分派（付款人（订单ID，paymentResult））
}
退货(
)：错误(
{错误}
) : (
顺序：{Order.\u id}
送货地址
名称：{order.user.Name}

电子邮件：

电话号码：{order.shippingAddress.phoneNumber}


配送：
{order.shippingAddress.address}，{order.shippingAddress.city}，
{' '}
{order.shippingAddress.postalCode}，
{' '}
{order.shippingAddress.country}

{order.isdeliver(

在{order.deliveredAt}上交付

) : (

订单已确认，您的订单将很快送达

)}
付款方式

方法：
{order.paymentMethod}

{order.isPaid(

于{order.paidAt}付款

) : (

交付完成后支付产品{order.paidAt}

)}
订购物品
{order.orderItems.length==0？
你的订单是空的
:(
{order.orderItems.map（（项，索引）=>(
{item.name}
{item.qty}X${item.price}=${（item.qty*item.price）.toFixed（2）}
))}
)}
订单摘要
项目：
${order.itemsPrice}
航运：
${order.shippingPrice}
{/* 
税款：
${order.taxPrice}
*/}
                    {!order.isPaid && (