[英]React useState within mapped parent component
Im new to React and im trying to understand useState.我是 React 的新手,我正在尝试理解 useState。 So im pulling in an array of products and then mapping the array to display each product card:所以我拉入了一个产品数组,然后映射该数组以显示每个产品卡片:
export default function ProductList({ products }) {
return (
<Grid templateColumns='repeat(3, 1fr)' columnGap={6} rowGap={10}>
{
products.map(product => (
<ProductCard key={product.node.id} product={product} productID={product.node.id} />
))
}
</Grid>
)
}
and inside of my ProductCard
I have a bunch of useState
, to handle product options, variants, etc.在我的ProductCard
中,我有一堆useState
,用于处理产品选项、变体等。
const [available, setAvailable] = useState(true)
const [selectedVariant, setSelectedVariant] = useState('')
const [selectedOptions, setSelectedOptions] = useState('')
const { addToCart } = useContext(CartContext)
So my question is, do each of the ProductCard
actually share the same useState, even though they are being mapped?所以我的问题是,每个ProductCard
是否实际上共享相同的 useState,即使它们正在映射?
You map collection of separate components, they won't share logic or state. State is hermetic and other components wont have access to it unless allowed to.您 map 是独立组件的集合,它们不会共享逻辑或 state。State 是密封的,除非允许,否则其他组件将无法访问它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.