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
}

数组对象更改时React.Component不更新

1 个答案: