无法加载 React.js 页面并且无法弄清楚原因

Question

我知道handleChange和handleSubmit尚未完成，但这不是问题，因为即使删除这些元素我也无法加载它。我正在学习一个较旧的教程，有些内容已被弃用，但我无法弄清楚这部分的问题。甚至使用来自 Github 的代码：

https://github.com/CleverProgrammers/react-challenge-amazon-clone/blob/master/src/Payment.js

...使用的创建者不会加载任何更好的内容。所有其他部分加载都很好。

感谢您的任何见解，因为这对我来说是一次学习经历。

import { useElements, useStripe,CardElement } from '@stripe/react-stripe-js';
import { React, useState } from 'react'
import CurrencyFormat from 'react-currency-format';
import { Link } from 'react-router-dom';
import CheckoutProduct from './CheckoutProduct';
import './Payment.css'
import { useStateValue } from './StateProvider'
import { getBasketTotal } from './reducer';


function Payment() {
  
  const [{basket,user},dispatch] =useStateValue();
  const [processing , setProcessing] = useState("");
  const [succeeded, setSucceeded] = useState(false);
  const [error,setError] = useState(null);
  const [disabled , setDisabled] = useState(true);
//stripe 
const stripe = useStripe();
const elements = useElements();
const handleSubmit = e =>{
  //stripe stuff
}
const handleChange = e =>{
  //current 600
    //lsiten for changes and display errors
    setDisabled({error}=null);
    setError("Error unknown");// event is deprecated need to find valid replacement
}
  return (
    <div className='payment'>
    
        <div className='payment__container'>

          <h1>
            Checkout (
              <Link to = '/checkout'>{basket?.length} items</Link>
              )
          </h1>

            <div className='payment__section'>
                <div className='payment__title'>
                    <h3>Delivery Adress</h3>
                </div>
                <div className='payment__address'>
                  <p>{user?.email}</p>
                  <p>123 Smith Lane</p>
                  <p>Camden, New Jersey</p>

                </div>
            </div>

            <div className='payment__section'>
              <div className='payment__title'>
                  <h3>Review Items and delivery</h3>
              </div>
              <div className='payment__items'>
                  {basket.map(item =>(
                    <CheckoutProduct
                        id ={item.id}
                        title = {item.title}
                        image = {item.image}
                        price = {item.price}
                        rating = {item.rating}
                    />))}
              </div>
                
            </div>

            <div className='payment__section'>
                <div className='payment__title'>
                    <h3>Payment Title</h3>
                </div>
                <div className='payment__details'>
                  {/*Stripe 535*/}
                    <form onSubmit={handleSubmit}>
                      <CardElement onChange={handleChange} />
                      <div className='payment__priceContainer'>
                        <CurrencyFormat
                        renderText={(value)=>(
                          <>
                          <h3>Order Total: {value}</h3>
                          </>
                        )}

                          decimalScale={2}
                          value = {getBasketTotal(basket)}
                          displayType = {"text"}
                          thousandSeparator = {true}
                          prefix={'$'}

                        />
                        <button disabled = {processing || disabled || succeeded } > 
                          <span>{processing ? <p>Processing</p>: "Buy Now"}</span>
                         </button>
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Payment 

Answer 1

import React, {useState} from 'react';

React 导入时出现语法错误

Answer 2

最好发布从浏览器控制台收到的错误。但我的猜测是你在某个地方有语法错误。例如：

          <h1>
        Checkout (
          <Link to = '/checkout'>{basket?.length} items</Link>
          )
      </h1>

这看起来不正常。