Reactjs 使用React钩子删除/更新嵌套对象

我对母语编程语言比较陌生。我一直在尝试制作我的第一个独立应用程序，当然是做列表应用程序。 我必须在各自的类别下做项目。这些待办事项的来源是一个预定义的对象，如下所示

const [listData, setListData] = useState([
{
  id: 1,
  title: "Work",
  data: [
    {
      text: 'MSD',
      key: 1
    },
    {
      text: 'Cosmo',
      key: 2
    },
    {
      text: 'Jackson',
      key: 3
    },
  ]
},
{
  id: 2,
  title: "Home",
  data: [
    {
      text: 'Gym',
      key: 4
    },
    {
      text: 'Dinner',
      key: 5
    },
    {
      text: 'React',
      key: 6
    },
  ]
},
  ]);

此数据在主函数App（）中定义。使用以下代码，数据在屏幕上完美呈现。

我应该如何编写此函数以便删除所选项目？ 我猜，一旦我找到了上述问题的解决方案，我应该能够找出如何更新数据集

---

任何帮助都将不胜感激。谢谢。

您可以简化您的

onDeleteHandler

功能，如下所示：

const newData = listData.map(group => {
    return { 
        ...group,
        data: group.data.filter(task => task.key !== key)
    }
})
setListData(newData);

---

您可以将

onDeleteHandler

函数简化如下：

const newData = listData.map(group => {
    return { 
        ...group,
        data: group.data.filter(task => task.key !== key)
    }
})
setListData(newData);

---

您可以映射组/类别并过滤数据数组：

const onDeleteHandler = key => {
  const newData = listData.map(category => ({
      ...category,
      data: category.data.filter(item => item.key !== key)
    })
  );
  setListData(newData);
};

使用功能状态更新可能更为正确，因为在单个渲染周期内多个状态更新排队的情况下，下一个状态取决于正确删除任务项的前一个状态：

const onDeleteHandler = key => {
  setListData(listData => listData.map(category => ({
      ...category,
      data: category.data.filter(item => item.key !== key)
    })
  ));
};

let数据=[{
id:1，
标题：“工作”，
数据：[{
文本：“MSD”，
关键词：1
},
{
文本：“Cosmo”，
关键词：2
},
{
短信：“杰克逊”，
关键词：3
},
]
},
{
id:2，
标题：“家”，
数据：[{
文字：“健身房”，
关键词：4
},
{
短信：“晚餐”，
关键词：5
},
{
文本：“反应”，
关键字：6
},
]
},
];
constOnDeleteHandler=key=>{
const newData=data.map（类别=>({
类别
数据：category.data.filter（item=>item.key！==key）
})
);
返回新数据；
};
log（onDeleteHandler（3））

您可以映射组/类别并过滤数据数组：

const onDeleteHandler = key => {
  const newData = listData.map(category => ({
      ...category,
      data: category.data.filter(item => item.key !== key)
    })
  );
  setListData(newData);
};

使用功能状态更新可能更为正确，因为在单个渲染周期内多个状态更新排队的情况下，下一个状态取决于正确删除任务项的前一个状态：

const onDeleteHandler = key => {
  setListData(listData => listData.map(category => ({
      ...category,
      data: category.data.filter(item => item.key !== key)
    })
  ));
};

let数据=[{
id:1，
标题：“工作”，
数据：[{
文本：“MSD”，
关键词：1
},
{
文本：“Cosmo”，
关键词：2
},
{
短信：“杰克逊”，
关键词：3
},
]
},
{
id:2，
标题：“家”，
数据：[{
文字：“健身房”，
关键词：4
},
{
短信：“晚餐”，
关键词：5
},
{
文本：“反应”，
关键字：6
},
]
},
];
constOnDeleteHandler=key=>{
const newData=data.map（类别=>({
类别
数据：category.data.filter（item=>item.key！==key）
})
);
返回新数据；
};
log（onDeleteHandler（3））

太棒了！谢谢你的指导。我现在明白了。@HrishikeshDeshkar不客气。如果问题得到充分解决，请接受答案。太棒了！谢谢你的指导。我现在明白了。@HrishikeshDeshkar不客气。如果问题得到充分解决，请接受回答。谢谢您的帮助。只是在代码段中无法访问setListData（newData）。我不得不把它从新数据的代码中移出。谢谢你的帮助。只是在代码段中无法访问setListData（newData）。我不得不把它从新数据的代码中完全去掉。

const onDeleteHandler = key => {
  setListData(listData => listData.map(category => ({
      ...category,
      data: category.data.filter(item => item.key !== key)
    })
  ));
};