数组更改时 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 不会重新渲染组件。