React Dom在更新状态数组后没有更新

Question

所以这个函数更新这个状态数组:let [Produits, setProduit] = useState(JSON.parse(Devis.produits))

let changeQte = (id, e) => {
let produittable = Produits;
produittable.forEach((p) => {
if (p.id == id) {
p.quantityAchete = parseInt(e.target.value);
}
});
setProduit(produittable);  
};

数组更新没有任何问题，但更改没有被重新渲染

{console.log('rendering') ,Produits.map((p) => (
<div key={p.id} className="product_column flex_center">
<div className="productItem">{p.nom}</div>
<div className="productItem">{p.category}</div>
<div className="productItem">{p.prix_vente} DA</div>
<input
onChange={(e) => changeQte(p.id, e)}
type="number"
name="qte"
value={p.quantityAchete}
/>

正如你所看到的，我正在登录到控制台来检查那行是否正在执行，它确实执行了!但是呈现的值不更新!

Answer 1

不要改变状态，而是这样做:

let changeQte = (id, e) => {
setProduit(existing => existing.map(c => c.id === id ? {...c,quantityAchete: parseInt(e.target.value)} : c))
};   

这些行:

// this line just sets produittable to the same reference as Produits.
// so now produittable === Produits, it's essentially useless
let produittable = Produits;
produittable.forEach((p) => {
if (p.id == id) {
// you are mutating 
p.quantityAchete = parseInt(e.target.value);
}
});
// because produittable === Produits, this doesn't do anything
setProduit(produittable);  

Answer 2

为了扩展Adam的回答，您还可以克隆当前状态Produits并将其分配给局部变量produittable，并使状态更新被识别。

所以不用这个:

let produittable = Produits;

您可以简单地像这样克隆它，使用展开操作符:

let produittable = [...Produits];

Answer 3

除了Adam所说的，除了没有直接修改状态之外，您没有看到任何更改的原因是因为组件只有在状态实际更改时才被重新渲染。为了知道状态是否改变，react对两种状态进行了简单的比较。由于您直接修改了状态，因此引用保持不变，因此您的组件不会重新呈现。