React组件中Map类型State更新后Input值未重新渲染问题

你的问题出在React对引用类型状态的更新机制上：React的useState只有当传入的状态值是一个全新的引用时，才会触发组件重渲染。而Map是引用类型，你之前的两种写法都是在修改同一个Map实例的内容，然后把同一个引用传给setVoucherSet，React检测不到引用变化，自然不会重新渲染Input组件。

为什么你的两种写法都不生效？ #

1. 第一种写法：setVoucherSet(voucherSet.set(voucherDemonination, voucherQuantity))
Map.set()方法的返回值是原Map实例本身，所以你相当于把同一个引用传给了状态更新函数，React认为状态没有变化。

2. 第二种写法：const tempVoucherSet = voucherSet; tempVoucherSet.set(...)
   这里的tempVoucherSet只是原Map的一个引用，修改它本质上还是在修改原Map实例，最后传给setVoucherSet的还是同一个引用，React依然不会触发重渲染。

正确的解决方案 #

你需要每次更新状态时创建一个新的Map实例，基于旧的Map内容修改后再传入setVoucherSet，这样就能让React检测到引用变化，触发重渲染。

方案1：创建新Map实例更新

const handleChange = (e)=>{
  const voucherDenomination = parseInt(e.target.id);
  const voucherQuantity = parseInt(e.target.value);
  if (voucherQuantity >= 0) {
    // 基于原Map创建一个全新的Map实例
    const newVoucherSet = new Map(voucherSet);
    // 在新Map上修改值
    newVoucherSet.set(voucherDenomination, voucherQuantity);
    // 传入新引用更新状态
    setVoucherSet(newVoucherSet);
  }
}

方案2：函数式更新（推荐）

如果你的状态更新依赖于最新的状态值，推荐使用函数式更新，它能确保你拿到的是组件最新的状态，避免闭包导致的旧状态问题：

const handleChange = (e)=>{
  const voucherDenomination = parseInt(e.target.id);
  const voucherQuantity = parseInt(e.target.value);
  if (voucherQuantity >= 0) {
    setVoucherSet(prevVoucherSet => {
      // 基于最新的旧状态创建新Map
      const newVoucherSet = new Map(prevVoucherSet);
      newVoucherSet.set(voucherDenomination, voucherQuantity);
      return newVoucherSet;
    });
  }
}

补充说明 #

关于初始化部分：你在组件开头创建initialVoucherSet的写法是没问题的，因为useState的初始值只会在组件第一次渲染时生效，后续渲染不会再使用这个初始值。如果后续activeVoucher.voucherDenominations可能发生变化，你可以用useEffect来同步更新状态，但这不是当前问题的核心。

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