我有一系列組態檔。
陣列中的每個專案都有一個標簽陣列。
例如。devs = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skills: ["HTML", "javascript"]} ]
我首先想創建一個包含所有獨特技能的陣列。
然后我想根據我選擇的技能過濾devs陣列。我想將該獨特技能陣列映射為按鈕，并在單擊按鈕時過濾映射的 devs 陣列。
const devs = [
{ name: "John", skills: ["react", "javascript"]},
{ name: "Jane", skills: ["HTML", "javascript"]} ];
const allSkills = //Need all unique values from devs.skills
const [filters, setFilters] = useState([]);
return (
<>
Filter:
{allSkills.map((skill) => <button onClick=() => setFilters(??)>{skill}</button>)}
{devs.map((dev) => <p>{dev.name} Skills:
{dev.skills.map((skill) => <span>{skill}</span>)}
</p>))} //need to filter this based on filters
</>
)
它在一個 React 組件中，我盡可能地使用它。
uj5u.com熱心網友回復：
因此，要獲得一系列獨特的技能，您可以使用擴展運算子concat和Set然后您可以使用filter方法來獲得基于所選技能的開發人員。
const devs = [{
name: "John",
skills: ["react", "javascript"]
},
{
name: "Jane",
skills: ["HTML", "javascript"]
}
];
const skills = Array.from(new Set([].concat(...devs.map(({ skills }) => skills))))
const filterBySkill = (skill) => {
return devs
.filter(({ skills }) => skills.includes(skill))
.map(({ name }) => name)
}
console.log(filterBySkill('javascript'))
console.log(filterBySkill('react'))
console.log(skills)uj5u.com熱心網友回復：
要獲取您可以Set結合使用的獨特技能串列，map例如
let uniqueSkills = new Set(devs.map(x=> x.skills).flat());
然后，如果你想過濾你的初始陣列，你可以使用這樣的東西：
let filteredList = devs.filter(x=> x.skills.includes(word));
whereword是一個字串或一個包含字串的變數，具體技巧可以找到。
uj5u.com熱心網友回復：
如果您不想創建 aSet并將其轉換回陣列，則可以使用flatand來替代另一個答案reduce：
const devs = [
{ name: "John", skills: ["react", "javascript"]},
{ name: "Jane", skills: ["HTML", "javascript"]} ];
const allSkills = devs.map(dev => dev.skills).flat().reduce(
(arr, val) => {
if (!arr.includes(val)) arr.push(val);
return arr
},
[]
)
console.log(allSkills)轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481232.html
標籤：javascript 数组 反应