我试图为电子商务商店创建一个useContext（），在那里我可以将数据传递给每个组件，并更改产品数量，但我遇到了一个错误。我的应用程序在导入context（）之前运行得很好;
下面是代码....

import React, { createContext, useContext, useState, useEffect } from 'react';
import { toast } from 'react-hot-toast';

const Context = createContext();

export const StateContext = ({ children }) => {
    const [showCart, setShowCart] = useState(false);
    const [cartItems, setCartItems] = useState();
    const [totalPrice, setTotalPrice] = useState();
    const [totalQuantities, setTotalQuantities] = useState();
    const [qty, setQty] = useState(1);

    const incQty = () => {
        setQty((prevQty) => prevQty + 1);
    }
    const decQty = () => {
        setQty((prevQty) => {
            if (prevQty - 1 < 1) return 1;
            return prevQty - 1;
        })
    }

    return (
        <Context.Provider
            value={{
                showCart,
                cartItems,
                totalPrice,
                totalQuantities,
                qty,
                incQty,
                decQty
            }}
        >
            { children }
        </Context.Provider>
    )
}

export const useStateContext = () => useContext(Context);

当我尝试将我的useStateContext（）导入到下面的文件中时，它抛出了一个错误，整个应用程序崩溃。

import React, { useState } from 'react';
import { AiFillStar, AiOutlineMinus, AiOutlinePlus, AiOutlineStar } from 'react-icons/ai';
import { Product } from '../../components';
import { client, urlFor } from '../../lib/client';

import { useStateContext } from '../../context/stateContext';

const ProductDetails = ({ product, products }) => {
    const [index, setIndex] = useState(0)
    const { image, name, details, price } = product;
    const { decQty, incQty, qty } = useStateContext();
  return (
    <div>
        <div className="product-detail-container">
            <div>
                <div className='image-container'>
                    <img className='product-detail-image' src={urlFor(image && image[index])} alt="product image" />
                </div>
                <div className="small-images-container">
                    {image?.map((item, i) => (
                        <img 
                            src={urlFor(item)}
                            className={i === index ? "small-image selected-image" : "small-image"}
                            onMouseEnter={()=> setIndex(i)}
                        />
                    ))}
                </div>
              </div>
              <div className="product-detail-desc">
                  <h1>{name}</h1>
                  <div className="reviews">
                      <div>
                          <AiFillStar />
                          <AiFillStar />
                          <AiFillStar />
                          <AiFillStar />
                          <AiOutlineStar />
                      </div>
                      <p>(20)</p>
                  </div>
                  <h4>Details: </h4>
                  <p>{details}</p>
                  <p className="price">${price}</p>
                  <div className="quantity">
                      <h3>Quantity:</h3>
                      <p className="quantity-desc">
                          <span className="minus" onClick={decQty}>
                              <AiOutlineMinus />
                          </span>
                          <span className="num">
                              {qty}
                          </span>
                          <span className="plus" onClick={incQty}>
                              <AiOutlinePlus />
                          </span>
                      </p>
                  </div>
                  <div className="buttons">
                      <button type="button" className='add-to-cart' onClick="">
                          Add to Cart
                      </button>
                      <button type='button' className="buy-now" onClick="">
                          Buy Now
                      </button>
                  </div>
              </div>
        </div> 

          <div className="maylike-products-wrapper">
              <h2>You may also like</h2>
              <div className='marquee'>
                  <div className="maylike-products-container track">
                      {products.map((item) => (
                          <Product key={item._id} product={item} />
                      ))}
                  </div>
              </div>
          </div>
    </div>
  )
}

export default ProductDetails;

export const getStaticProps = async ({ params: {slug}}) => {
    const query = `*[_type == "product" && slug.current == '${slug}'][0]`;
    const productsQuery = '*[_type == "product"]';

    const product = await client.fetch(query);
    const products = await client.fetch(productsQuery);

    console.log(product);
    return {
        props: { product, products}
    }