React.Component не обновляется при изменении объектов массива

Question

У меня есть простой редуктор, который делает следующее:

case ACTION_TYPE.RATE_BEER:
  const { item, rating } = action.data;
  const beers = state.beers.map((mappedBeer) => {
    if (mappedBeer.id === item.id) {
      return {
        ...mappedBeer,
        rating
      }
    } else {
      return mappedBeer;
    }          
  });
  return {
    ...state,
    beers
}

Возвращая состояние новостей, компонент не обновляется. Наоборот, если я сделаю:

return {
    ...state,
    beers: null
}

компонент обновляется как положено.

Это начальное состояние:

const initialState = {
  beers: null
}

Я что-то здесь не так делаю?

Answer 1

Две проблемы:

1) Я предполагаю, что ваш компонент дисплея не использует state.rating - поэтому он не рендеринг.Из вашего кода я предполагаю, что вы использовали state.beer.rating.

2) Если ваше начальное состояние пива: ноль, вы не можете оценивать пиво, потому что нет пива для оценки;вы будете отображать пустой массив.Вам нужно проверить, нет ли пива в массиве пива.

Это должно исправить это:

const initialState = {
  beers: null
}

case ACTION_TYPE.RATE_BEER:
  const { item, rating } = action.data;
  //add logic here to check if item is not in beers, add it to the state.
  if (!state.beers.some(beer => beer.id === item.id))  {
    return {
      ...state,
      beers: [...state.beers, {id: item.id, rating}]
    }
  }
  //here you're checking to update existing beer rating
  const beers = state.beers.map((mappedBeer) => {
    if (mappedBeer.id === item.id) {
      return {
        mappedBeer.rating = rating 
      }
    } else {
      return mappedBeer;
    }          
  });

  return {
    ...state,
    beers
}