Javascript 是否可以将react中的setValue作为函数传递给子componenet

我在react中有以下设置，现在它抱怨setClose不是add to cart中的函数。我一直想知道如何从add-to-cart组件内部触发setclose-useState，我想我无法将它作为一个道具传递给孩子。现在不知道该怎么办

提前谢谢

主要成分

const [close, setClose] = useState(true)

  const toggleCart = () => {
    setClose(!close)
  }

return (
  <AddToCart
    cartAdd={setClose}
  />
  {close ? <CartItems /> : null}
)

const[close，setClose]=useState（true）
const toggleCart=（）=>{
setClose（！close）
}
返回(
{关闭？：空}
)

添加到购物车组件

import React from "react"

import { useShoppingCart, formatCurrencyString } from "use-shopping-cart"

const AddToCart = ({ sku, setClose }) => {
  const { addItem } = useShoppingCart()
  const test = () => {
    setClose(false)
  }
  return (
    <div>
      <button onClick={(() => addItem(sku), test())}>ADD TO CART</button>
    </div>
  )
}

export default AddToCart

从“React”导入React
从“使用购物车”导入{useShoppingCart，formatCurrencyString}
const AddToCart=（{sku，setClose}）=>{
const{addItem}=useShoppingCart（）
常数测试=（）=>{
setClose（假）
}
返回(
addItem（sku），test（））}>添加到购物车
)
}
导出默认AddToCart

const[close，setClose]=useState（true）
const toggleCart=（）=>{
setClose（！close）
}
返回(
{关闭？：空}
)
常量AddToCart=（{sku，cartAdd}）=>{
const{addItem}=useShoppingCart（）
const handleButtonClick=（）=>{
附加项（sku）；
cartAdd（）；
}
返回(
添加到购物车
)
}

像这样使用

---

已更新

我现在收到此错误

错误：超过最大更新深度。

当组件重复调用setState时，可能会发生此情况

const [close, setClose] = useState(true)

  const toggleCart = () => {
    setClose(!close)
  }

return (
  <AddToCart
    cartAdd={toggleCart}
  />
  {close ? <CartItems /> : null}
)

const AddToCart = ({ sku, cartAdd }) => {
  const { addItem } = useShoppingCart()
  const handleButtonClick = () => {
     addItem(sku);
     cartAdd();
  }
 
  return (
    <div>
      <button onClick={handleButtonClick}>ADD TO CART</button>
    </div>
  )
}