需要帮助理解 react.js 中的 .map 和 .filter

Question

有问题的代码 = (My Gist)

我看到了几个与这个类似的问题，但我无法从他们那里得到适合我的情况的答案：

(Similar Question)

我的问题是以下两个“console.log()”如何正确显示：

console.log(delTodos[index]); // returns object called
console.log('the above is index ' + index); // returns appropiate index of object called

但是当我使用时

const newArr = delTodos.filter( () => delTodos[index] === index);
this.setState({ todos: newArr});

它会从显示中删除整个数组。

我的理论是：

所以我要处理 2 个循环； (MAP x 3) 和 (FILTER x 3) 用于每次地图迭代。

第一个 MAP 循环 = ((index = 0)(.filter === index)); //自过滤器*3返回true

第二个 MAP 循环 = ((index = 1)(.filter === index)); //自过滤器*3返回true

第三个 MAP 循环 = (index = 2(.filter === index)); //自过滤器*3返回true

如果循环像上面描述的那样工作，那么使用 !== 将永远不会删除任何内容，因为过滤器的比较总是错误的。

由于地图是循环函数并且导致过滤器循环至少相等三次，因此上述控制台日志是否应该在每次点击时至少显示 3 次？

我试图做的是过滤掉上面两个控制台日志显示/描述的单个索引。不是整个数组。

Answer 1

您正在过滤掉delTodos 中不等于数组中该对象索引的任何对象。这是一个问题，因为您的数组是对象列表而不是整数。

要按原样返回数组，但删除 index 处的项目，请尝试：

const newArr = delTodos.filter( (v, i) => i !== index);

v（如 value 中）表示每次迭代中的项目，i 表示循环的当前迭代。您想删除i 等于index 的项目。

注意：我们实际上并没有将v 用于任何事情，但i 必须是第二个参数。

Answer 2

看看这个：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

当返回为 false 时，过滤器将删除数组中的任何项目。例如（我猜你想要的功能）：

var todos = ['eat', 'sleep', 'rave', 'repeat'];
var delTodo = 'sleep';

var result = todos.filter(todo => todo === delTodo);

结果将是 = ['eat', 'rave', 'repeat']

或删除一组项目：

var todos = ['eat', 'sleep', 'rave', 'repeat'];
var delTodos = ['sleep', 'eat'];

// Checks each todo against the ones to delete, and if it exists
// returns false so it can be removed
var result = todos.filter(todo => !delTodos.some(d => d === todo));

结果将是 = ['rave', 'repeat']