Question

有问题的代码=（My Gist）

我见过几个与此类似的问题，但我无法从他们那里得到答案：

我的问题是以下两个'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

第3个MAP循环=（index = 2（.filter === index））; //因为过滤器* 3

返回true

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

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

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

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

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

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

2 个答案: