.map 是如何工作的？

Question

我正在尝试使用地图删除一些信息以保存所有选定的值，然后按删除，所有内容都应该被删除，但是当我选择所有这些值时我只做 1，我做错了什么？

librosData.filter((x) =>
selectedIDs.has(x.id)).map( x => {
 console.log(x.id)
 let tempLibrosData = librosData;
 tempLibrosData = tempLibrosData.filter(e => e.id != x.id)
 console.log(tempLibrosData)
}

这就是控制台带来的功能：

如您所见，它带回了 3 个 ID，但是当我过滤这些 ID 时，它只删除了 3 个中的 1 个？我很困惑不应该全部删除吗？

更多洞察

我有一个本地存储

const data = JSON.parse(window.localStorage.getItem("verpedidos"))

这个变量包含一堆信息：

我只想修改信息里面的变量，也就是数据。

我将信息传递给另一个变量，这样我就可以修改它而不影响其他任何东西

这是let librosData = data[0].data

然后是选择过程->

librosData.filter((x) => //where x is the row I have select
selectedIDs.has(x.id)).map( x => { // checks if such id is in the map
console.log(x.id)   //shows all ids
let tempLibrosData = librosData; // variable = data
tempLibrosData = tempLibrosData.filter(e => e.id != x.id) // filter items that match the row.id 
console.log(tempLibrosData) //render the new list of items

Answer 1

map() 函数用于遍历数组并操作或更改数据项。在 React 中，map() 函数最常用于将数据列表呈现到 DOM。 - https://www.pluralsight.com/guides/how-to-use-the-map()-function-to-export-javascript-in-react

您不应该在您所描述的情况下使用地图。您可以简单地使用过滤器而不是将其嵌套在地图中。

从 librosData 中删除 selectedIDs 数组中的 libros：

const remainingLibros = librosData.filter(libro => !selectedIDs.has(libro.id))

如果 librosData 是一个反应状态变量：

setLibrosData(prevState => prevState.filter(libro => !selectedIDs.has(libro.id))

编辑： 如果您想知道您的特定代码发生了什么，而不是您应该如何实现您想要的功能：

map 函数遍历数组中的每个项目并执行您在该项目上提供的逻辑。在每次迭代中，您都通过新值过滤 librosData，但您永远不会更新 librosData 的值，因此您所做的过滤永远不会在下一个过滤器之前保存。这就是为什么控制台日志总是返回一个包含 2 个值的数组。

Answer 2

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

Answer 3

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

您的地图正在按照您认为的方式处理数据，但是您并没有将新返回的数组保存在任何地方。我根据您的代码和描述假设您想更改原始数组，因此您可以执行以下操作：

selectedIDs = selectedIDs.has(x.id)).map( x => {
 console.log(x.id)
 let tempLibrosData = librosData;
 tempLibrosData = tempLibrosData.filter(e => e.id != x.id)
 console.log(tempLibrosData)
}

根据 has(x.id) 的用途，这可能并不完全有效，但希望你能明白要点。