从 React 状态数组中删除一行答案

【问题标题】：Removing a row from a React state array从 React 状态数组中删除一行
【发布时间】：2021-07-29 11:26:52
【问题描述】：

我正在创建一个动态报告，您可以在两个列表中添加/删除产品

第一个列表是产品订单
第二个是数据库中的其余产品

我只想在点击提交按钮时调用我的 api，所以在此之前，我的状态中的所有内容都应该更新。

添加按钮与下面的代码完美配合：

function onAddClicked(productId){
        let newProduct = filteredProducts.find(x => x.productId === productId);
        let updatedProductList = purchaseOrderDetails;
        newProduct.adjustByAmount = newProduct.total;
        updatedProductList.push(newProduct);
        setPurchaseOrderDetails(updatedProductList);
        filterDuplicates(filteredProducts, purchaseOrderDetails);
}

其中 setPurchaseOrderDetails 是订单中的产品，而 filterDuplicates 设置其余产品的状态，所有产品在这里都可以正常工作。

但是，在我的删除功能上，其余产品的状态似乎更新了，但订单上的产品数量似乎并没有减少，因为状态保持不变。

function onDeleteClicked(productId){
        let excludedProducts = filteredProducts;
        let deletedIndex = purchaseOrderDetails.findIndex(x => x.productId === productId);
        let productToDelete = purchaseOrderDetails[deletedIndex];
        productToDelete.total = 0;
        productToDelete.adjustByAmount = 0;
        let detailsToUpdate = purchaseOrderDetails.filter(x => x.id !== productToDelete.id)
        
        console.log('updateDetails', detailsToUpdate)
        excludedProducts.push(productToDelete);
        console.log('updateFilter', excludedProducts)
        setPurchaseOrderDetails(detailsToUpdate);
        setFilteredProducts([...filteredProducts]);
        console.log('stateDetail', purchaseOrderDetails)
        console.log('stateFilter', filteredProducts)
}

我还在我的 setPurchaseOrderDetails 之前登录了控制台，我可以看到过滤器工作正常，但是当它到达需要更新状态时它不需要更新。

【问题讨论】：

标签： javascript reactjs react-native state

【解决方案1】：

当您在此处使用时，filteredProducts 不会改变： ->setFilteredProducts([...filteredProducts]);

您将 productToDelete 推送到不在被过滤产品中的排除产品

【讨论】：

【解决方案2】：

首先，setState 始终是异步的，因此 setPurchaseOrderDetails 和 setFilteredProducts 也是异步的。因此，您对 state 所做的任何更新都不会立即反映在下一行中。

您可以在更新状态后或组件重新渲染流程中的任何位置在一些异步回调（如 setTimeout）中打印它们。

您可能会因为在状态更新后立即反映的过滤产品值而感到困惑。它没有发生是因为状态更新，它确实发生了，因为filteredProducts 和excludedProducts 都指向相同的引用，并且你有新元素到excludedProducts。

所以为了避免这种混淆，我建议你在修改之前克隆状态。

你可以像下面这样更好地编写你的删除函数

function onDeleteClicked(productId) {
  const productToDelete = purchaseOrderDetails.find(x => x.id === productId);
  const detailsToUpdate = purchaseOrderDetails.filter(x => x.id !== productId);

  setPurchaseOrderDetails(detailsToUpdate);
  setFilteredProducts([
    ...filteredProducts,
    { ...productToDelete,
      total: 0,
      adjustByAmount: 0
    }
  ]);

}

【讨论】：