将项目添加到特定的列表数组 redux答案

【问题标题】：add item into specific list array redux将项目添加到特定的列表数组 redux
【发布时间】：2021-03-28 13:57:36
【问题描述】：

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

好的，所以我的状态如下：

[
{
    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。我设法让它有点工作，它将项目添加到特定数组中，但问题是这也会创建新的空白列表。以下是 reducer 的外观：

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

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

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

映射并返回列表（state），并使用扩展语法更新items：

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": return state.map ((list) => list.id === action.payload.listID ? { ...list, items: list.items.filter(item => item.itemID !== action.payload.itemID) } : list ) ```
要删除项目，请使用过滤器而不是地图，并保留所有 id 与您要删除的项目不同的项目。

【解决方案2】：

试试这个：

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

请注意，这是伪代码，但它应该仍然有效。

您的示例不起作用，因为您在 returning 一个 new 数组，该数组与 state 具有（大约）相同的结构，除了添加的元素。要添加它，只需将其直接添加到state，而不使用map + return，因此不会创建新数组。

【讨论】：

感谢您的解释，现在我明白为什么它会以这种方式工作，无论如何，Ori 的答案就是我想要的。