Как удалить объект Array в состоянии объекта реагировать

Question

Я хочу удалить элементы из каждого из saveProduct s внутри каждого 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

Вы не возвращаете вычисленный результат!

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 2

У вас есть 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

демо

Answer 3

Вам нужно вернуть новое состояние в 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;
                }
            })
        }
    })
};