React中.map与.filter使用疑问：过滤指定索引元素时误清空数组

先直接戳中问题核心：你写的filter判断逻辑完全错误，这才导致数组被清空，同时你对map和点击事件的执行逻辑也有误解，我给你一步步拆解清楚：

1. 为什么filter会把数组清空？ #

你当前的过滤代码是：

const newArr = delTodos.filter( () => delTodos[index] === index);

这里有两个致命问题：

• 首先，delTodos[index]是你要删除的目标对象，而index是一个数字（比如0、1、2），对象和数字永远不可能相等，所以filter的回调函数每次都返回false，自然过滤后是空数组。
• 其次，你完全没利用filter自带的参数——filter遍历数组时，会把当前元素、当前元素的索引作为参数传给回调，你却只用了外部的index，逻辑方向从根上就错了。

2. 正确的filter写法（删除指定索引的元素） #

你的需求是过滤掉index对应的单个元素，那filter应该保留索引不等于目标index的所有元素，代码应该改成这样：

const newArr = delTodos.filter( (_, currentIndex) => currentIndex !== index);

简单解释：

• _是占位符，表示我们不需要用到当前元素本身；
• currentIndex是filter遍历到的每个元素的索引，只要它不等于你要删除的index，就保留这个元素。

3. 纠正你对map和点击事件的误解 #

你疑惑为什么console.log只输出一次，而不是三次？
因为map是在渲染阶段循环生成元素（比如三个删除按钮），但点击事件是用户点击单个按钮时才触发的——你点哪个按钮，就只会执行那个按钮绑定的点击事件里的代码，所以console.log只会输出对应按钮的index一次，不会触发所有三个按钮的点击逻辑。

你之前推测的“3次MAP循环每次触发3次FILTER循环”完全不成立，filter只在你点击按钮时执行一次，遍历整个数组一次，根本不存在和map的嵌套循环。

完整的React场景示例代码 #

假设你是在React组件里实现todo列表删除功能，正确的写法应该是这样：

class TodoList extends React.Component {
  state = { todos: [/* 你的todo对象数组 */] };

  handleDelete = (indexToDelete) => {
    const { todos } = this.state;
    // 过滤掉指定索引的元素
    const newTodos = todos.filter((_, i) => i !== indexToDelete);
    this.setState({ todos: newTodos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div>
        {todos.map((todo, index) => (
          <div key={index}>
            <span>{todo.content}</span>
            {/* 绑定删除事件，传递当前元素的index */}
            <button onClick={() => this.handleDelete(index)}>删除</button>
          </div>
        ))}
      </div>
    );
  }
}

这样点击删除按钮时，就只会删除对应索引的元素，不会清空整个数组啦。

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