Как изменить значение внутри массива объекта в Redux

Question

Я сохранил массив объектов в Redux State, и внутри каждого объекта есть ключ с именем price. Теперь, когда я увеличиваю кнопку количества, мне нужно получить доступ к объекту, у которого есть ключ внутри приставки, и изменить значение цены. Я смог это сделать, но он не работает должным образом, цена меняется, но в состоянии Redux добавляется новый объект, вы можете увидеть его на скриншоте ниже. надеюсь, я смог объяснить проблему ясно. если нет, пожалуйста, дайте мне знать, чтобы я мог объяснить больше.

Корзина Компонент

increament(e, item){
  let qty = e.target.previousElementSibling.textContent;
  qty++;
  e.target.previousElementSibling.textContent = qty;
  this.props.changePrice(item);
}

<div>
  <input onClick={(e) =>this.decreament(e)} type="submit" value="-"/>
  <span>1</span>
  <input onClick={(e) => this.increament(e, item)} type="submit" value="+"/>
</div>

function mapStateToProps(state){
   return({
     itemlist: state.rootReducer
   })
 }
function mapDispatchToProps(dispatch) {
   return({
      removeItem: (item)=>{
        dispatch({type: 'removeCart', payload: item})
      },
      changePrice: (item)=>{
        dispatch({type: 'changePrice', payload: item})
      }
   })
 }
export default connect(mapStateToProps, mapDispatchToProps)(Cart);

Компонент редуктора

const changePrice = (itemArray, item)=>{
  let newObject = {};
  let filteredObject = itemArray.filter(reduxItem => reduxItem.id === item.id);
  let newprice = filteredObject[0].price + filteredObject[0].price;
  filteredObject[0].price = newprice;
  newObject = filteredObject;
  const something = ([...itemArray, newObject]);
  return something;
}
const reducer = (state = [], action) =>{
  switch (action.type) {
    case 'Add':
      return [...state, action.payload]
    case 'removeCart':
      const targetItemIndex = state.indexOf(action.payload);
      return state.filter((item, index) => index !== targetItemIndex)
    case 'changePrice':
         return changePrice(state, action.payload)
    default:
      return state;
  }
}
export default reducer;

Answer 1

Вместо того, чтобы изменять состояние.

// use this
const newState = Object.assign({},state);

Мы можем создать новое состояние, и теперь, если вы это сделаете, это работает нормально.Это позволяет избежать мутирующего состояния.

Answer 2

filteredObject - это массив.Вы переопределяете newObject, чтобы быть массивом в этом выражении newObject = filteredObject.Таким образом, newObject является массивом (в [...itemArray, newObject]), а не объектом.Сохраняйте вещи простыми без лишней сложности. Вы можете использовать Array.map.Так что сделайте это вместо

const changePrice = (itemArray, item) => {
  return itemArray.map(reduxItem => {
     if(reduxItem.id === item.id){
       reduxItem.price = reduxItem.price + reduxItem.price
     }

     return reduxItem
  });
};

См. Это для получения дополнительной информации https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

Надеюсь, это поможет!