我试图创建一个购物车与NEXT JS和我面临着不同的错误在我的代码。首先，我在我的apps文件夹中创建了一个路由[product]/[productitems]。在我的[productitems]的page.tsx文件中。我正在获取参数以获取产品以及产品的ID。我使用sanity.io获取数据内容，并使用其client.fetch（）方法获取图像。
它不允许我在fetch方法下面声明useState，这样我就可以设置默认值。如果我试图在fetch方法下面声明它们，我会收到2个错误
TypeError：无法解构“param”的属性“params”，因为它未定义
无效的钩子调用。钩子只能在函数组件的主体内部调用
我摆脱这个错误的唯一方法是在我的组件顶部声明我的状态。
但现在我又收到了两个错误。我无法使用onClick方法更新状态。我的代码进入无限循环只要我点击更新数量或点击任何图像。我该怎么办？

const ProductItem = async ({params}:{params:{
  productitem:string, product:string}}) => {
    const [quantity,setQuantity] = useState(1);
    const [imageURL,setImageUrl] = useState('');

    const response = await client.fetch(`*[_type=="product" && _id =="${params.productitem}" && category->name =="${params.product}"]{
             _id,dressType,image,category->{name},
    }`)

      return <>
      <div className='mt-8 mb-12 flex flex-col lg:flex-row lg:gap-4 justify-center gap-2 mx-4 border-b-4'>
       <div className='flex flex-row lg:flex-col gap-2 justify-center rounded m-4 px-4'>
         {
          response[0].image.map((items:any)=>{
            return <Image src={urlForImage(items).url()} alt="product1" width={100} height={125} className='max-h-[125px] max-w-[100px] object-contain object-top' key={items._key} onClick={(event)=>{
              event.stopPropagation();
              setImageUrl(urlForImage(items).url())
            }}/>
          })
        }
        
       </div>

       <div className='rounded flex justify-center my-4 mx-2'>
          <Image src={imageURL ? imageURL : urlForImage(response[0].image[0]).url()} alt="product main" width={315} height={450}className='max-h-[450px] h-auto max-w-full object-contain object-top'/>
       </div>

       <div className='lg:my-4 lg:mx-2 flex flex-col lg:p-4 mx-auto' >
          <h1 className='text-xl font-semibold'>BRUSHED RAGLAN SWEATSHIRT</h1>
          <h4 className='text-lg font-bold text-gray-500'>Sweater</h4>
          <div className='mt-5 flex flex-col'>
              <h5 className='text-lg font-semibold'>SELECT SIZE</h5>
              <div className='text-lg my-1 space-x-8 py-1'>
                    <span className='rounded border-2 inline font-bold p-2'>XL</span>
                    <span className='rounded border-2 inline font-bold p-2'>L</span>
                    <span className='rounded border-2 inline font-bold p-2'>M</span>
                    <span className='rounded border-2 inline font-bold p-2'>S</span>
              </div>

              <div className='my-4 space-y-2'>
                  <label className='font-bold'>Quantity:</label>
                  <div className='flex flex-row gap-x-2 items-center'>
                        <Button className=' border-2 ' onClick={()=>{
                          if(quantity<=0)return;
                          setQuantity(
                            quantity + 1 
                          )
                        }}>
                          -
                        </Button>
                        <h6 className='text-xl font-bold'>{quantity}</h6>
                        <Button className=' border-2 ' onClick={()=>{

                          setQuantity(quantity + 1)
                          console.log("Quantity",quantity)
                        }}>
                          +
                        </Button>

                        <h4 className='mx-10 text-2xl font-bold'>$ 195.00</h4>
                  </div>

                  <Button className='my-2'>
                      <ShoppingCart className="mr-2 h-4 w-4" /> Add To Cart
                  </Button>
              </div>
          </div>
       </div>
    </div>
    
    <div className='mt-8 flex flex-col flex-wrap sm:max-w-[65%] gap-2 justify-center mx-auto mb-8'>
      <h1 className='text-2xl font-bold px-2'>Product Information</h1>
      <p className=' text-justify text-lg text-gray-500 px-2'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita earum aspernatur sapiente ut amet quae odit eius totam! Et cupiditate dolores eligendi. Maxime veniam nemo quia eveniet harum mollitia possimus?</p>
    </div>
  </>
    }

字符串
我得到这个无限循环，只要我点击+或-按钮，甚至我的3个图像中的任何一个，在点击是调用
x1c 0d1x的数据