当状态更改时，反应组件中的输入元素值不会重新渲染

Question

我的状态对象是一个地图const [voucherSet, setVoucherSet] = useState(initialVoucherSet);

initialVoucherSet 是我在无状态组件函数开始时创建的映射。

const initialVoucherSet = new Map();
activeVoucher.voucherDenominations.forEach(voucherDemonination=> {
initialVoucherSet.set(voucherDemonination, 0);
});
const [voucherSet, setVoucherSet] = useState(initialVoucherSet);

activeVoucher.voucherDenominations数字数组。

我有一个输入可以触发onChange上的函数。

const handleChange = (e)=>{
const voucherDemonination = parseInt(e.target.id);
const voucherQuantity = parseInt(e.target.value);
if (voucherQuantity >= 0) { setVoucherSet(voucherSet.set(voucherDemonination, voucherQuantity)); }
}

状态对象凭证集正在更新，但我的输入值没有重新呈现。

下面是输入元素：

<CounterInput type='number'  id={voucherDemonination} onChange={handleChange} value={voucherSet.get(voucherDemonination)} />

我已经尝试过，我认为这可能是因为我没有为 voucherSet 状态变量设置不同的对象。所以我尝试了一些有点笨拙的东西...

const handleChange = (e)=>{
const voucherDemonination = parseInt(e.target.id);
const voucherQuantity = parseInt(e.target.value);
if (voucherQuantity >= 0) { 
const tempVoucherSet = voucherSet;
tempVoucherSet.set(voucherDemonination, voucherQuantity);
setVoucherSet(tempVoucherSet); 
}
}

但它仍然没有奏效。

我错在哪里？ 提前非常感谢！:)

Answer 1

所以发生的事情是 Map 本身没有改变(例如，每次更新 Map 时，内存中仍然有对相同 Map 的引用(，所以 react 不会重新渲染。

这属于整个"不可变"的东西。每当状态发生更改时，都会创建一个新对象或数组，以便做出反应并轻松检测到某些内容发生了变化，从而重新渲染。这使得 react 不必遍历对象/数组中的每个键以查看是否有任何更改(这会降低您的性能(。

在更新地图的代码中尝试此操作：

tempVoucherSet.set(voucherDemonination, voucherQuantity);
setVoucherSet(new Map(tempVoucherSet)); // -> notice the new Map() 

这类似于您可能在 react 和状态更改中看到的其他代码，其中每当添加新属性/项时都会创建新对象/数组：

setState({ ...oldState, newProperty: 'newValue' })
setState([ ...oldArray, newItem ]);

Answer 2

我过去也有同样的问题。以这种方式设置状态：

setVoucherSet(new Map(voucherSet.set(voucherDemonination, voucherQuantity)));

这将导致重新渲染。