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

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)); //returns 真，因为过滤器*3

第二个 MAP 循环 = ((index = 1)(.filter === index)); //returns 真，因为过滤器*3

第 3 个 MAP 循环 = (index = 2(.filter === index)); //returns 真，因为过滤器*3

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

上面的控制台日志不应该在每次点击时至少显示三次，因为地图是一个循环函数并且导致过滤器循环至少三次相等吗？

我想做的是通过上面的两个控制台日志过滤掉 displayed/described 的单个索引。不是整个数组。

Answer 1

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

按原样 return 数组，但删除 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

当 return 为 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']

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

Need help understanding .map and .filter in react.js

javascript

arrays

reactjs

filter