如何删除对象数组中的对象的状态作出反应

Question

我想从每个saveProducts的删除每个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

你有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

Answer 2

你需要的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 3

您不必返回计算结果！

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;
        }
      })
    })
  };