无法加载 React.js 页面且无法找出原因

Question

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

的代码

https://github.com/CleverProgrammers/react-challenge-amazon-clone/blob/master/src/Payment.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 depricated 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

最好 post 您从浏览器控制台得到的错误。但我的猜测是你在某处有语法错误。例如：

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

这看起来不正常。

Answer 2

import React, {useState} from 'react';

React 导入中存在语法错误

无法加载 React.js 页面且无法找出原因

Cannot get React.js page to load and cannot figure out why

javascript

deprecated

stripe-payments

reactjs

react-hooks