Question

我想从每个saveProduct对象内部的每个storeData中删除项目

const initialState = {
  storeData: [{
      "code": "f1",
      "name": "storage-no-1",
      "saveProducts": [{
          "code": "P1",
          "id": "1",
          "name": "product-no-1",
          "size": 20,
        },
        {
          "code": "P1",
          "id": "2",
          "name": "product-no-2",
          "size": 20,
        },
      ]
    },
    {
      "code": "f2",
      "name": "storage-no-2",
      "saveProducts": [{
          "code": "P1",
          "id": "1",
          "name": "product-no-1",
          "size": 20,
        },
        {
          "code": "P1",
          "id": "2",
          "name": "product-no-2",
          "size": 20,
        },
      ]
    },
  ]
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = initialState;
  }

  deleteItem(saveProductsId, storeCode) {
    this.setState(prevState => {
      prevState.storeData.map(store => {
        if (store.code == storeCode) {
          return {
            ...store,
            saveProducts: [
              ...store.saveProducts.filter(product => product !== saveProductsId)
            ]
          };
        } else {
          return store;
        }
      })
    })
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您需要在setState中返回新状态

deleteItem = (saveProductsId, storeCode) => {
    this.setState(prevState => {
        return {...prevState, storeData: prevState.storeData.map(store => {
                if (store.code == storeCode) {
                    return {
                        ...store,
                        saveProducts: [
                            ...store.saveProducts.filter(product => product !== saveProductsId)
                        ]
                    };
                } else {
                    return store;
                }
            })
        }
    })
};

Answer 2

您不返回计算结果！

deleteItem(saveProductsId, storeCode) {
    this.setState(prevState => {
      return prevState.storeData.map(store => { // add return on this line
        if (store.code == storeCode) {
          return {
             ...store,
             saveProducts: [
                ...store.saveProducts.filter(product => product !== saveProductsId)
              ]
           };
         } else {
            return store;
        }
      })
    })
  };

Answer 3

您的代码中有2个问题

1）在状态内时，您不会返回新状态，

 this.setState(prevState => {
      return {

您实际上是在返回新状态。

因此，您的代码应如下所示

this.setState(prevState => {
      return {
        ...prevState, storeData: prevState.storeData.map(store => {          
          if (store.code == storeCode) {
            return {
              ...store,
              saveProducts: [
                ...store.saveProducts.filter(product => product.id !== saveProductsId)
              ]
            };
          } else {
            return store;
          }
        })
      }
    })

2）您正在比较...store.saveProducts.filter(product => product !== saveProductsId)，这里您需要product.id而不是product

demo

如何在对象状态下删除对象数组

3 个答案: