当我的状态是数组而不是对象时，如何使用reducer更新状态

如何解决当我的状态是数组而不是对象时，如何使用reducer更新状态

我在reducer函数中返回新状态时遇到问题。我的状态是一个对象数组。每个对象都有两个键值对类别：” 和项目：[{}，{}，{}] 。

const initialState = [
  {
    category: 'vegetables',items: [
      {
        id: 1,name: 'carrot',amount: 3,unit: 'pc',},{
        id: 2,name: 'potato',amount: 1,unit: 'kg',{
        id: 3,name: 'broccoli',amount: 2,],{
    category: 'fruits',items: [
      {
        id: 4,name: 'orange',amount: 4,{
        id: 5,name: 'blueberries',amount: 250,unit: 'g',{
    category: 'drinks',items: [
      {
        id: 6,name: 'Coca Cola',unit: 'l',{
        id: 7,name: 'Grapefruit juice',{
        id: 8,name: 'Water',{
    category: 'cereal products',items: [
      {
        id: 9,name: 'Cereal',unit: 'pack',{
        id: 10,name: 'Muesli',];

我想删除项目数组中的项目，其余部分保持不变。问题出在我的reducer函数中，我的switch语句返回了错误的值：

const rootReducer = (state = initialState,action) => {
  switch (action.type) {
    case 'REMOVE_ITEM':
      state = [
        state.map((element) => element.items.filter((item) => item.id !== action.payload.id)),];
      return state;
    default:
      return state;
  }
};

我不要求快速解决问题，但只要提示即可。

谢谢你们！

解决方法

此解决方案假定“ item.id”值在“ initialState”范围内是唯一的。

const rootReducer = (state = initialState,action) => {
  switch (action.type) {
    case 'REMOVE_ITEM':
      state = state.map(element => 
        Object.assign({},element,{items: element.items.filter(item => item.id !== action.payload.id)}
        )
      );
      return state;
    default:
      return state;
  }
};

,

我认为您的减速器应该是这样的：

const rootReducer = (state = initialState,action) => {
  switch (action.type) {
    case 'REMOVE_ITEM':
      return state.map(element => ({
        ...element,items: element.items.filter((item) => item.id !== action.payload.id))
      })
    default:
      return state;
  }
};