UI 数组更改时未更新 React

Question

我有这两个函数来更新数组中的元素。我将举一个例子来使它更清楚：数组：[['M',1],['S',2],['L',4]]

第一个功能：当我向这个数组添加一对时，它会检查第一个索引是否已经存在，如果存在，它会更新第二个索引。假设我尝试添加 ['M',3]，那么数组应该更新为：[['M',4],['S',2],['L' ,4]]

 const addRow = () => {
      console.log(rows);
      let unique = true;
      rows.forEach((item)=>{  
        if(item[0] == size){
          item[1] = parseInt(item[1]) + parseInt(qty);
          unique = false;
          return;
        }
      })
      if(unique){
        setRows([...rows, [size, qty,rows.length]]);
      }
    };

第二个功能：从数组中的给定索引中删除。

 const removeRow = (trashId) => {
      row = rows;
      row.splice(trashId,1);
      setRows(row);
    };

所以，这两个函数可以完美地工作。问题是，UI 没有在更新数组后立即显示更改。它只会在更新其他内容后显示它们。知道发生了什么事吗？谢谢！！

Answer 1

更新数组时，需要用到setRows([...row]);。 row.splice(trashId,1); 会改变数组的值，但不会改变 row 的引用，因此 React 不会重新渲染组件。

UI 数组更改时未更新 React

UI is not updating when array changes React

reactjs

use-state