在映射的父组件中反应 useState答案

【问题标题】：React useState within mapped parent component在映射的父组件中反应 useState
【发布时间】：2022-06-20 22:33:48
【问题描述】：

我是 React 新手，我正在尝试理解 useState。所以我拉入了一个产品数组，然后映射数组以显示每个产品卡：

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>
  )
}

在我的ProductCard 内部，我有一堆useState，用于处理产品选项、变体等。

const [available, setAvailable] = useState(true)
const [selectedVariant, setSelectedVariant] = useState('')
const [selectedOptions, setSelectedOptions] = useState('')
const { addToCart } = useContext(CartContext)

所以我的问题是，每个 ProductCard 是否实际上共享相同的 useState，即使它们正在被映射？

【问题讨论】：

标签： javascript reactjs use-state

【解决方案1】：

您映射不同组件的集合，它们不会共享逻辑或状态。状态是封闭的，除非允许，否则其他组件将无法访问它。

【讨论】：