如何移除嵌套数组内的指定todos元素并实现列表重渲染

给定如下嵌套结构的数组：

const arrTest = [
    {
        name: 'Shopping List',
        todos: [
            {
                text: 'bananas',
                completed: false
            },
            {
                text: '1 lbs ground turkey',
                completed: true
            },
            {
                text: 'milk',
                completed: false
            }
        ]
    },
    {
        name: 'College List',
        todos: [
            {
                text: 'University of Utah',
                completed: false
            },
            {
                text: 'Utah Valley University',
                completed: true
            },
            {
                text: 'Utah Tech University',
                completed: false
            }
        ]
    },
    {
        name: 'Chores',
        todos: [
            {
                text: 'wash dishes',
                completed: false
            },
            {
                text: 'vacuum downstairs',
                completed:  true
            },
            {
                text: "clean bathroom",
                completed: true
            }
        ]
    }
];

需要实现删除按钮，移除指定的todos元素并重新渲染列表。此前尝试用splice()但无法操作到内层数组，用delete()会留下空占位，请问该如何解决？使用delete()后再写新函数是否是最优方案？

1. 正确使用splice()操作内层数组 #

你需要先定位到目标todos所属的外层列表项，再对内层数组调用splice()。比如已知目标todo的外层列表索引和内层todo索引：

// 删除指定位置的todo
function deleteTodo(listIndex, todoIndex) {
  // 直接修改原数组（非框架场景可用）
  arrTest[listIndex].todos.splice(todoIndex, 1);
  // 执行重新渲染逻辑，比如调用渲染函数
}

// 示例：删除Shopping List中的第一个todo（bananas）
deleteTodo(0, 0);

2. delete()的弊端及不推荐后续处理 #

delete()仅会将数组元素置为undefined，不会改变数组长度，残留的空占位会导致渲染异常。后续再写函数清理空元素完全没必要，直接用splice()或immutable方法更高效。

3. 适配前端框架的Immutable更新方式 #

如果在React、Vue等框架中，直接修改原数组可能无法触发重新渲染，建议生成新数组保持数据不可变：

// 返回新数组的删除方法
function deleteTodoImmutable(listIndex, todoIndex) {
  // 复制外层数组
  const updatedLists = [...arrTest];
  // 复制目标列表的todos数组，过滤掉指定索引的todo
  updatedLists[listIndex].todos = updatedLists[listIndex].todos.filter((_, idx) => idx !== todoIndex);
  // 在框架中用新数组更新状态（比如React的setState）
  // setArrTest(updatedLists);
  return updatedLists;
}

// 示例调用
const updatedArr = deleteTodoImmutable(0, 0);

这种方式通过filter()生成新的todos数组，确保框架能检测到数据变化并重新渲染。

4. 根据todo内容删除的场景 #

如果不知道索引，仅知道todo的text内容，可以这样处理：

// 根据列表名和todo文本删除
function deleteTodoByText(listName, todoText) {
  // 找到目标列表的索引
  const listIndex = arrTest.findIndex(item => item.name === listName);
  if (listIndex === -1) return;
  
  // 过滤掉匹配文本的todo
  arrTest[listIndex].todos = arrTest[listIndex].todos.filter(todo => todo.text !== todoText);
  // 执行重新渲染
}

// 示例：删除Chores中的wash dishes
deleteTodoByText('Chores', 'wash dishes');

内容的提问来源于stack exchange，提问作者Mrs_Spider