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

Question

有问题的代码=（My Gist）

我已经看到了几个类似于这个的问题，但是我无法从他们那里得到答案：

（Qazxswpoi）

我的问题是以下两个'console.log（）是如何正确显示的：

Similar Question

但是当我使用时

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

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

我的理论是：

所以即时处理2个循环; （MAP x 3）和（FILTER x 3）用于每个地图迭代。

第一个MAP循环=（（index = 0）（。filter === index））; //从过滤器* 3开始返回true

第二个MAP循环=（（index = 1）（。filter === index））; //从过滤器* 3开始返回true

第3个MAP循环=（index = 2（.filter === index））; //从过滤器* 3开始返回true

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

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

我想要做的是过滤掉上面两个控制台日志显示/描述的单个索引。不是整个阵列。

Answer 1

您将过滤掉

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

中与数组中的对象索引不相等的任何对象。这是一个问题，因为你的数组是一个对象列表而不是整数。

要按原样返回数组，但删除了delTodos中的项目，请尝试：

index

const newArr = delTodos.filter( (v, i) => i !== index); （在值中）表示每次迭代中的项目，v表示循环的当前迭代。你想删除i等于i的项目。

注意：我们实际上并没有使用index，但是v必须是第二个参数。

Answer 2

看看这个：i

当return为false时，Filter将删除数组中的任何项。所以例如（我猜你想要的功能）：

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

结果将是=

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));