1

所以这个函数更新这个状态数组： 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}
              />

如您所见，我正在登录控制台以检查该行是否正在执行，并且确实如此！但呈现的值不会更新！

4

2 回答 2

1

不要改变 state，而是这样做：

 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);
于 2021-02-18T14:38:32.857 回答
0

除了亚当所说的，除了不直接修改状态之外，您没有看到任何更改的原因是因为组件仅在状态实际更改时才会重新渲染。并且要知道状态是否发生了变化，react 对两种状态进行了浅比较。由于您直接修改了状态，因此引用保持不变，因此您的组件不会重新渲染。

于 2021-02-18T14:50:06.693 回答