我正在try 从Reaction Reduxstore 删除特定项目. 我的初始状态是一个多维数组:

{
    "flex": [
        {
            "id": "01-00-1234567890",
            "positions": [
                {
                    "id": 0,
                    "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
                    "artikelnummer": "B15201027",
                    "zusatz": "5000",
                    "menge": 1,
                    "bp_produkt": 63.7,
                    "bp_gesamt": 63.7
                },
                {
                    "id": 1,
                    "bezeichnung": "24V LED Driver 25W",
                    "artikelnummer": "370202500",
                    "zusatz": "0",
                    "menge": 1,
                    "bp_produkt": 68.82,
                    "bp_gesamt": 68.82
                }
            ]
        },
        {
            "id": "01-01-1234567890",
            "positions": [
                {
                    "id": 0,
                    "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
                    "artikelnummer": "B15201027",
                    "zusatz": "5000",
                    "menge": 1,
                    "bp_produkt": 90.7,
                    "bp_gesamt": 90.7
                },
                {
                    "id": 1,
                    "bezeichnung": "24V LED Driver 25W",
                    "artikelnummer": "370202500",
                    "zusatz": "0",
                    "menge": 1,
                    "bp_produkt": 101.82,
                    "bp_gesamt": 102.82
                }
            ]
        }
    ]
}

现在,我想从存储中ID为‘01-00-1234567890’的父数组中删除ID为1的项.

我当前的减速器函数如下所示:

deletePosition(state, action) {
      const itemId = action.payload.konfigId // 01-00-1234567890
      const positionId = action.payload.row.position // 1

      console.log(current(state))

      state.data.flex = state.data.flex
        .filter(items => {
          return items.id == itemId
        })
        .map(pos => pos.positions.filter(p => p.id == positionId))
    }
  }

我是新手Redux,需要帮助

非常感谢

推荐答案

const state = {
  data: {
    "flex": [{
        "id": "01-00-1234567890",
        "positions": [{
            "id": 0,
            "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
            "artikelnummer": "B15201027",
            "zusatz": "5000",
            "menge": 1,
            "bp_produkt": 63.7,
            "bp_gesamt": 63.7
          },
          {
            "id": 1,
            "bezeichnung": "24V LED Driver 25W",
            "artikelnummer": "370202500",
            "zusatz": "0",
            "menge": 1,
            "bp_produkt": 68.82,
            "bp_gesamt": 68.82
          }
        ]
      },
      {
        "id": "01-01-1234567890",
        "positions": [{
            "id": 0,
            "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
            "artikelnummer": "B15201027",
            "zusatz": "5000",
            "menge": 1,
            "bp_produkt": 90.7,
            "bp_gesamt": 90.7
          },
          {
            "id": 1,
            "bezeichnung": "24V LED Driver 25W",
            "artikelnummer": "370202500",
            "zusatz": "0",
            "menge": 1,
            "bp_produkt": 101.82,
            "bp_gesamt": 102.82
          }
        ]
      }
    ]
  }
};

const itemId = '01-00-1234567890';
const positionId = 1;
const nextState = state.data.flex.map(v => {
  if(v.id === itemId) {
    return {
      ...v,
      positions: v.positions.filter(pos => pos.id !== positionId)
    }
  }
  return v;
});

console.log('nextState: ', nextState);

Reactjs相关问答推荐

如何等待我的插入内容提交后再继续执行指令?

LocalStore未存储正确的数据

如何将Redux工具包添加到expo (SDK 50)项目?

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

梅X折线图无响应

在继承值更改时重置react 挂钩窗体字段值

状态更改时的rtk查询触发器

useEffect不重新渲染

更新对象状态的父数组时记住子组件

如何根据ReactJS中元素列表中的布尔值仅显示一次值

我可以同时使用 Gatsby 和 NEXT.JS 吗?

是的验证:使用 useFieldArray 访问表单值

React router v5 仅在生产中不适用于嵌套路由

如何使用 redux 和 react-plotly.js

ReactJS 动态禁用按钮

状态链接未传递到路由页面

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

当从数组中删除数据时,UseEffect 不会重新渲染,仅在添加数据时才会重新渲染

如何使图标适合 react-bootstrap 中的行元素