Question

在 React 中过滤后访问过滤后的数据

2021-08-08

62

reactjs

有一篇帖子，该帖子有一个名为 wasteItemList 的对象数组。我尝试获取数组中这个对象的数据。为此，我使用了一个过滤器，它给出了正确的数据。这就是我尝试的方法。

const wasteItems = posts && posts.wasteItemList && posts.wasteItemList.filter(wasteItem => wasteItem._id===arrayId);
console.log(wasteItems);

这是我从过滤中获得的数据。

我想访问 wasteItems 中的数据。因此，为此我尝试了 console.log(wasteItems._id); ，但我收到一条错误消息，提示“TypeError：无法读取未定义的属性‘_id’”。我该如何解决此错误？

Answer 1

首先，您应该使用 find 而不是 filter 来查找元素。它将返回一个元素而不是数组。

const wasteItem = posts?.wasteItemList?.find(wasteItem => wasteItem._id===arrayId);

其次，搜索后的结果可能是 undefined 。因此，您需要在使用后进行检查：

console.log(wasteItems?._id)

Answer 2

Array.filter 返回一个数组，因此当您说 wasteItems._id 时，它无法像对象一样访问它。

如果您只寻找特定的 wasteItem，请执行以下操作：

const wasteItem = posts && posts.wasteItemLis.find(wasteItem => wasteItem._id=== arrayId);

Answer 3

Array.filter 以数组格式返回数据。要访问数据，您应该对返回的数据使用 map/forEach，或者如果过滤器数据始终包含一个元素，则使用 Array.find 而不是使用 Array.filter。

解决方案 1 -

const wasteItems = posts && posts.wasteItemList && posts.wasteItemList.filter(wasteItem => wasteItem._id===arrayId);
wasteItems.forEach(wasteItem=>{console.log(wasteItem._id)})

解决方案 2 -

const wasteItems = posts && posts.wasteItemList && posts.wasteItemList.find(wasteItem => wasteItem._id===arrayId);
console.log(wasteItems._id);