React中map遍历渲染的子组件useState状态是否共享？

不会共享。每一个通过map遍历渲染生成的ProductCard组件实例，都持有完全独立、互不干扰的内部useState状态。

具体规则说明 #

• React的状态隔离逻辑是：每一个完成挂载的组件实例，都会为内部调用的useState分配独立的状态存储空间，同一个组件的不同挂载实例之间，内部状态默认完全不互通。
• 你遍历products数组渲染列表的逻辑，本质是多次独立挂载ProductCard组件：每遍历一个商品项，就生成一个全新的组件实例，每个实例内部的available、selectedVariant、selectedOptions状态都是各自维护的。你在某一张商品卡中切换选中的规格、修改库存状态，完全不会影响其他商品卡的对应状态。
• 你当前代码里给每个ProductCard传入稳定唯一的key={product.node.id}是正确做法，这个key会帮助React精准区分不同组件实例，避免列表增删、排序重渲染时出现状态串位。如果错误使用数组下标这类不稳定值作为key，才可能在列表变动时触发状态错位的异常。

补充说明：你代码中通过useContext(CartContext)获取的addToCart方法不属于组件内部独立状态。Context本身是跨组件共享的数据源，所有ProductCard实例访问到的都是同一份CartContext提供的值，这和useState的状态隔离规则并不冲突。

相关代码参考 #

ProductList列表遍历逻辑：

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内部状态定义：

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

内容的提问来源于stack exchange，提问作者RobbieC