Javascript 将项添加到特定的列表数组redux中

我知道有很多类似的线程，但我没有找到解决方案

好的，我有一个状态，看起来：

[
{
    id: 1,
    title: 'todo',
    items: [
        {
            itemID: 1,
            itemText: 'finish this project'
        },
        {
            itemID: 2,
            itemText: 'take trash out'
        },
        {
            itemID: 3,
            itemText: 'sleep'
        },

    ]
},
{
    id: 2,
    title: 'doing now',
    items: [
        {
            itemID: 1,
            itemText: 'add redux'
        },
        {
            itemID: 2,
            itemText: 'fixing bugs'
        },
    ]
},
{
    id: 3,
    title: 'done',
    items: [
        {
            itemID: 1,
            itemText: 'add components'
        },
        {
            itemID: 2,
            itemText: 'add material ui'
        },
    ]
}

]

我有一个redux reducer，它应该在特定的列表中添加一个条目，我有那个列表的id，还有我应该添加的itemText。我设法使它工作起来，它将项添加到Specifiin数组中，但问题是它也会创建新的空白列表。以下是reducer的外观：

case "ADD_ITEM":
  return [
    state.map((list)=>(
    (list.id === action.payload.id) ?  list.items.push({
      itemID: 89,
      itemText: action.payload.description
    }) : list
    
  ))
  ]

知道如何在不创建新列表的情况下将项目添加到特定列表项目中吗？

试试以下方法：

case "ADD_ITEM":
    state.forEach((list, index)=>(
    if (list.id === action.payload.id){
      state[index].items.push({
        itemID: 89,
        itemText: action.payload.description
      }
    })
    
  ))

请注意，这是伪代码，但它仍然可以工作

您的示例不起作用，因为您正在

返回

一个新数组，该数组的结构（大约）与

状态

相同，只是添加了元素。要添加它，只需直接将其添加到

状态

，而不使用

映射

+

返回

，从而不创建新数组。

尝试以下操作：

case "ADD_ITEM":
    state.forEach((list, index)=>(
    if (list.id === action.payload.id){
      state[index].items.push({
        itemID: 89,
        itemText: action.payload.description
      }
    })
    
  ))

请注意，这是伪代码，但它仍然可以工作

您的示例不起作用，因为您正在

返回

一个新数组，该数组的结构（大约）与

状态

相同，只是添加了元素。要添加它，只需直接将其添加到

状态

，而不使用

映射

+

返回

，从而不创建新数组。

映射并返回列表（

状态

），并使用扩展语法更新

项

：

case "ADD_ITEM":
  return state.map(list =>
    list.id === action.payload.id ? {
      ...list,
      items: [
        ...list.items,
        {
          itemID: 89,
          itemText: action.payload.description
        }
      ]
    } : list
  )

映射并返回列表（

状态

），并使用扩展语法更新

项

：

case "ADD_ITEM":
  return state.map(list =>
    list.id === action.payload.id ? {
      ...list,
      items: [
        ...list.items,
        {
          itemID: 89,
          itemText: action.payload.description
        }
      ]
    } : list
  )

---

正是我想要的，谢谢！抱歉再次打扰您，但我又被卡住了哈哈，现在我正在尝试删除项，但什么也没有发生``case“remove_item”：返回状态.map（（list）=>list.id==action.payload.listID？{…list，items:list.items.filter（item=>item.itemID！==action.payload.itemID）}:list）``要删除项目，请使用过滤器而不是映射，并保留id与要删除的项目不相同的所有项目。这正是我要查找的，谢谢！抱歉再次打扰您，但我又被卡住了哈哈，现在我正在尝试删除项，但什么也没有发生``case“remove_item”：返回状态.map（（list）=>list.id==action.payload.listID？{…list，items:list.items.filter（item=>item.itemID！==action.payload.itemID）}：list）``要删除项目，请使用filter而不是map，并保留所有id与要删除的项目不相同的项目。感谢您的解释，我现在明白了为什么它是这样工作的，反正Ori的答案就是我要找的。感谢您的解释，我现在明白了为什么它是这样工作的，无论如何，Ori的答案正是我想要的。