ReactJS数组map渲染的input对应数量标签更新异常该如何解决？

核心问题根因 #

你拖动滑块后数量不更新，是因为违反了React的状态不可变原则：在handleRangeChange方法中直接修改了原selectedProducts状态数组的内部元素属性，再把同一个数组的引用传递给setSelectedProducts，React做浅比较时检测到数组引用没有变化，就不会触发组件重渲染，因此页面上的数量label不会同步更新。

修复代码 #

将handleRangeChange修改为如下实现，创建新数组和要修改的元素对象，保证状态引用发生变化：

const handleRangeChange = (target, index) => {
  const currentValue = parseInt(target.value);
  // map返回全新数组，不修改原状态
  const newSelectedProducts = selectedProducts.map((item, i) => {
    // 仅修改对应下标的商品数量，返回新对象
    if (i === index) return { ...item, quantity: currentValue };
    return item;
  });
  setSelectedProducts(newSelectedProducts);
};

修改后拖动滑块就能实时同步展示商品数量了。

额外优化点 #

1. 修复useEffect重复执行问题 #

你当前的useEffect没有添加依赖数组，会在每次组件重渲染时都执行一次，建议添加空依赖数组，保证只在组件挂载时拉取一次商品列表：

useEffect(() => {
  // 原有拉取商品列表的逻辑保持不变
}, []); // 空依赖数组，仅组件挂载时执行

2. 适配多选下拉逻辑 #

你用的是多选下拉框，原生多选下拉的e.target.value会返回所有选中项的id数组，你当前的逻辑仅支持单次选中单个商品，可调整为自动识别新增选中项，避免重复添加商品：

const handleSelectChange = (e) => {
  const allSelectedIds = e.target.value;
  // 过滤出还没加入选中列表的新增商品id
  const addedIds = allSelectedIds.filter(id => !selectedProducts.some(p => p.id === id));
  addedIds.forEach(id => {
    const product = products.find(p => p.id === id);
    setSelectedProducts(prev => [...prev, {
      id,
      name: product.name,
      quantity: 1
    }]);
  });
}

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