filtering 相关问题

我正在尝试为我的侧边导航创建一个过滤器部分，我可以在其中打开或关闭每个以仅显示该标题的漫画。目前，我在正确循环数据集时遇到问题我正在尝试为我的侧边导航创建一个过滤器部分，我可以在其中打开或关闭每个<li>以仅显示该标题的漫画。目前，我在正确循环数据集以获取唯一名称值并将其打印为 <li> 时遇到问题。到目前为止我所尝试的是映射 PRODUCTS 对象，获取每个名称值并将其存储在一个数组中，使用单独的索引值循环遍历该数组长度，然后如果满足此条件则返回该名称值 (arr[ i] !== arr[j]). 例如，我的产品数据集可能包含 15 个不同的产品或对象，其中 5 个名为 Alita Battle Angel、5 个名为 Wolverine、5 个名为 Spiderman。预期输出： console.log 这个 (1) Array=[1:'Alita Battle Angel', 2:'Wolverine', 3:'Spiderman'] 归还这个 <li> Alita Battle Angel</li> <li> Wolverine </li> <li> Spiderman </li> 实际产量： console.log 这个 (15) Array=[ 1:'Alita Battle Angel', 2:'Alita Battle Angel', 3:'Alita Battle Angel', 4:'Alita Battle Angel', 5:'Alita Battle Angel', 6:'Wolverine', 7:'Wolverine', 8:'Wolverine', 9:'Wolverine', 10:'Wolverine', 11:'Spiderman', 12:'Spiderman', 13:'Spiderman', 14:'Spiderman', 15:'Spiderman' ] 归还这个 <li>Alita Battle Angel</li> 这是我的代码：（我还分割了每个漫画的名称值，以便它仅返回“，”之前的字符，以确保每个漫画标题都是完全唯一的。示例：“Alita Battle Angel，Vol .1”--->“阿丽塔战斗天使”） import React from "react"; import { PRODUCTS } from "../Utilities/PRODUCTS"; import "./SideNav.scss"; const SideNav = (props) => { let arr = []; return ( <div className="sideNav-container"> <div className="sideNav-title"></div> <ul> {PRODUCTS.map((product) => { // map the PRODUCTS data // loop products data while carrying a singular products 'name' for (let i = 0; Object.keys(PRODUCTS).length > i; i++) { // add that name value to array list arr.push(product.name.split(",", 1)); console.log("products length: " + Object.keys(PRODUCTS).length); // if array greater than 1 item if (arr.length > 1) { console.log(arr); // loop the length of that array for (let j = 0; j < arr.length; j++) { // if array[j] not equal to previous array item return name if (arr[i] !== arr[j]) { let title = `${product.name}`.split(",", 1); return <li key={[product.id]}>{title}</li>; } else return null; } } } })} </ul> </div> ); }; export default SideNav; 问题是我的代码将整个数据集作为单个对象注入。基本上将我的数据集作为单个数组返回 15 次。我不明白为什么要这样做。我知道使用过滤器方法可能是一个可能的解决方案，并且还使用react中的useState钩子。我已经尝试过这两种方法，但收到了某种特定于我的文件设置的错误。任何解决方案的建议将不胜感激。你的代码很混乱。它最终发生的原因是因为您多次循环 PRODUCTS var。一旦使用顶级 PRODUCTS.map 调用，然后再次在 map 回调中使用 for (let i = 0; Object.keys(PRODUCTS).length > i; i++) {。您还在外部维护一个 arr ，这是不好的做法，因为您实际上只想要纯函数。然后你再次循环这个，所以事情变得非常复杂，没有任何收获。不管怎样，最好退后一步。 map 实际上是不适合这里工作的工具。从根本上讲，map将采用长度为n的数组，并对每个项目应用转换，返回一个具有相同长度n的新数组。您真正想要的是一个 reduce，它能够循环 PRODUCTS 数组中的每个元素并构建一个具有不同长度的新数组。您不仅希望获得名称“类别”的平面数组，还希望能够将这些“类别”链接到相关产品。我已经在每个类别中添加了嵌套标题，这样您就可以单击标题来展开它。 import React, { useState } from "react"; import { PRODUCTS } from "../Utilities/PRODUCTS"; import "./SideNav.scss"; import "./styles.css"; const SideNav = (props) => { const [openCategory, setOpenCategory] = useState(null); return ( <div className="sideNav-container"> <div className="sideNav-title"></div> <ul> {Object.entries( PRODUCTS.reduce((productsByTitle, product) => { const category = product.name.split(",", 1)[0]; return { ...productsByTitle, [category]: [...(productsByTitle?.[category] ?? []), product], }; }, {}), ).map(([categoryName, categoryProducts]) => ( <li key={categoryName}> <span style={{ cursor: "pointer" }} onClick={() => setOpenCategory(categoryName)} > {categoryName} </span> <ul style={openCategory !== categoryName ? { display: "none" } : {}} > {categoryProducts.map(({ id, name }) => ( <li key={id}>{name}</li> ))} </ul> </li> ))} </ul> </div> ); }

javascript reactjs components jsx filtering

回答 1 投票 0

通过应仅包含的单个字母数组过滤单词数组

我目前有两个 PHP 数组：数组('a','c','r','r') 数组('carr','car','arc','ra','c','abc','do','aa','rr') 我想要的结果是：数组('carr','car','arc','ra','c','rr') 即过滤掉 'a...

php arrays filtering letter

回答 2 投票 0

删除平面数组中下一个元素不是价格值的元素

我有一大堆抓取的名称和价格，类似于以下内容：大批（ [0] => 苹果3 [1] => 0.40 英镑 [2] => 香蕉6 [3] => 1.80 英镑 [4] => 柠檬 [5] => 葡萄 [6...

php arrays filtering currency

回答 8 投票 0

保留仅包含字母和连字符的数组元素

我有以下数组：大批（ [0] => 文本 [1] => 纹理 [2] => 豆子 [3] => ）我想删除不包含 a-z 或 a-z 带破折号的条目。在...