我正在構建一個nextjs應用程式。一切正常。但在一個組件中，我面臨一個問題。其實我無法理解功能。我有一個Array帶Sub-Array。我必須為此添加search過濾器Array。當匹配一個專案或子專案時，該函式將回傳。但是看不懂。。
這是代碼。
這個id資料-
export default [
{
name: "Top Wear",
sub: [
{ name: "T-Shirts" },
{ name: "Casual Shirts" }
]
}
{
name: "Western Wear",
sub: [
{ name: "Dresses" },
{ name: "Jumpsuits" }
]
},
{ name: "Plus Size" },
{ name: "Sunglasses and Frames" },
{
name: "Footwear",
sub: [
{ name: "Casual Shoes" },
{ name: "Sports Shoes" }
]
},
{
name: "Lingerie & Sleepwear",
sub: [
{ name: "Bra" },
{ name: "Briefs" }
]
},
{
name: "Sports & Active Wear",
sub: [
{ name: "Sports Shoes" },
{ name: "Sports Sandals" },
{ name: "Active T-Shirts" },
{ name: "Active T-Shirts" },
]
},
{
name: "Gadgets",
sub: [
{ name: "Smart Wearables" },
{ name: "Fitness Gadgets" }
]
},
{ name: "Bag & Backpacks" },
{ name: "Luggages & Trolleys " }
]
這里我想添加匹配 directname或sub.name. 我無法理解如何撰寫函式。如果只有一個Arrayno Sub-Array..我可以這樣做
此代碼首先Array不是Sub-Array
import { useState, useEffect } from "react";
//Data
import CategoriesData from "Data/Header/SearchBar.data";
const Categories = ({ setFilterData, filterData }) => {
const [categories, setCategories] = useState(CategoriesData);
const [input, setInput] = useState("");
useEffect(() => {
if (input.length > 0) {
const mathches = CategoriesData.filter(item => {
const escapeRegExp = (str) => str.replace(/[\-\[\]\/\{\}\(\)\*\ \?\.\\\^\$\|]/g, "\\$&")
const regex = new RegExp(escapeRegExp(input), "gi");
return item.name.match(regex);
})
setCategories(mathches);
} else {
setCategories(CategoriesData);
}
}, [CategoriesData, input]);
return (
<Box>
<Box>
<InputBase
value={input}
onChange={(e) => setInput(e.target.value)}
/>
</Box>
<List>
{categories &&
categories.map((category, i) => (
<Box key={i}>
<ListItem>
<ButtonBase>
<Typography>
{category.name}
</Typography>
</ButtonBase>
</ListItem>
{category.sub &&
category.sub.map((subCategory, i) => (
<ListItem key={i}>
<ButtonBase>
<Typography>
{subCategory.name}
</Typography>
</ButtonBase>
</ListItem>
))
}
</Box>
))
}
</List>
</Box>
);
};
export default Categories;
請幫我..
uj5u.com熱心網友回復：
當然，您可以進行遞回搜索，但您也可以將搜索資料展平，使其沒有深度，然后進行與您在代碼中所做的完全相同的搜索。為了扁平化您的資料，您可以使用陣列函式：
data.flatMap(v => v.sub).concat(data.map(({sub, ...item}) => item))
請記住，這不會改變主資料陣列。
因此，首先它用于flatMap獲取子屬性并將它們展平，因此此時您有一個子類別陣列，然后它將其與主要類別串列連接起來（僅使用 map，它們的子屬性現在已被洗掉，導致其展平）。最后，您有一個包含 28 個類別（10 個主要 18 個子）的陣列要過濾。您可以鏈接filter方法并繼續。
uj5u.com熱心網友回復：
而不是過濾器使用減少。您可以同時過濾和修改子陣列。使用reduce幫助操作資料并同時過濾。
您可以根據需要修改邏輯。
示例代碼：
const mathches = CategoriesData.reduce((acc, item) => {
const escapeRegExp = (str) => str.replace(/[\-\[\]\/\{\}\(\)\*\ \?\.\\\^\$\|]/g, "\\$&")
const regex = new RegExp(escapeRegExp(input), "gi");
if(item.sub) {
const sub = item.sub.filter(({name}) => name.match(regex))
if(sub.length){
acc.push({name: item.name, sub})
}
}
else if(item.name.match(regex)){
acc.push(item)
}
return acc;
},[])
例子：
const data = [
{
name: "Top Wear",
sub: [{ name: "T-Shirts" }, { name: "Casual Shirts" }],
},
{
name: "Western Wear",
sub: [{ name: "Dresses" }, { name: "Jumpsuits" }],
},
{ name: "Plus Size" },
{ name: "Sunglasses and Frames" },
{
name: "Footwear",
sub: [{ name: "Casual Shoes" }, { name: "Sports Shoes" }],
},
{
name: "Lingerie & Sleepwear",
sub: [{ name: "Bra" }, { name: "Briefs" }],
},
{
name: "Sports & Active Wear",
sub: [
{ name: "Sports Shoes" },
{ name: "Sports Sandals" },
{ name: "Active T-Shirts" },
{ name: "Active T-Shirts" },
],
},
{
name: "Gadgets",
sub: [{ name: "Smart Wearables" }, { name: "Fitness Gadgets" }],
},
{ name: "Bag & Backpacks" },
{ name: "Luggages & Trolleys " },
];
const search = (data, input) => {
const mathches = data.reduce((acc, item) => {
const escapeRegExp = (str) =>
str.replace(/[\-\[\]\/\{\}\(\)\*\ \?\.\\\^\$\|]/g, "\\$&");
const regex = new RegExp(escapeRegExp(input), "gi");
if (item.sub) {
const sub = item.sub.filter(({ name }) => name.match(regex));
if (sub.length) {
acc.push({ name: item.name, sub });
}
} else if (item.name.match(regex)) {
acc.push(item);
}
return acc;
}, []);
return mathches;
};
console.log(search(data, "Top Wear"));
console.log(search(data, "Sandals"));
console.log(search(data, "Shoes"));uj5u.com熱心網友回復：
這是一個遞回解決方案——search()在資料中保留一個匹配陣列，每當它遇到一個名為sub它的子陣列時，它就會再次使用該子陣列呼叫自己。
未實作：區分大小寫、錯誤處理或超出匹配字串裸陣列的有用輸出。
const search = (str, data) => {
let out = [];
for (let obj of data) {
if (obj.name.indexOf(str) > -1) {
out.push(obj.name)
}
if (obj.sub) {
// recurse if there's a child array
out.push(search(str, obj.sub))
}
}
return out.flat()
}
output = search("e", [{
name: "Top Wear",
sub: [{
name: "T-Shirts"
},
{
name: "Casual Shirts"
}
]
}, {
name: "Western Wear",
sub: [{
name: "Dresses"
},
{
name: "Jumpsuits"
}
]
},
{
name: "Plus Size"
},
{
name: "Sunglasses and Frames"
},
{
name: "Footwear",
sub: [{
name: "Casual Shoes"
},
{
name: "Sports Shoes"
}
]
},
{
name: "Lingerie & Sleepwear",
sub: [{
name: "Bra"
},
{
name: "Briefs"
}
]
},
{
name: "Sports & Active Wear",
sub: [{
name: "Sports Shoes"
},
{
name: "Sports Sandals"
},
{
name: "Active T-Shirts"
},
{
name: "Active T-Shirts"
},
]
},
{
name: "Gadgets",
sub: [{
name: "Smart Wearables"
},
{
name: "Fitness Gadgets"
}
]
},
{
name: "Bag & Backpacks"
},
{
name: "Luggages & Trolleys "
}
])
console.log(output)轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364883.html
標籤：javascript 数组 反应 筛选
下一篇：如何對二維陣列的列進行排序？