同時映射 3 個或更多陣列的最佳方法或最佳實踐是什么？
對于這個例子：
首先我按團隊名稱過濾資料然后通過它們映射以顯示它們
（在這個例子中，我想只使用<div key={index} className={styles.member}> .... </div> 一次來減少編碼，因為它們完全相同）
--Yoe 可以自由更改代碼中的過濾器或映射方法--
function MyApp() {
const managementTeam = members.filter((m) => m.team === "management");
const developmentTeam = members.filter((m) => m.team === "development");
const uxTeam = members.filter((m) => m.team === "UX");
const contentTeam = members.filter((m) => m.team === "content");
const development = developmentTeam.map((m, index) => (
<div key={index} className={styles.member}>
<figure>
<img className="image-cover" src={m.image} alt={m.faName} />
</figure>
<div className={styles.info}>
<h3>{m.faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: m.background }}>
{m.position}
</div>
</div>
</div>
</div>
));
const management = managementTeam.map((m, index) => (
<div key={index} className={styles.member}>
<figure>
<img className="image-cover" src={m.image} alt={m.faName} />
</figure>
<div className={styles.info}>
<h3>{m.faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: m.background }}>
{m.position}
</div>
</div>
</div>
</div>
));
const ux = uxTeam.map((m, index) => (
<div key={index} className={styles.member}>
<figure>
<img className="image-cover" src={m.image} alt={m.faName} />
</figure>
<div className={styles.info}>
<h3>{m.faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: m.background }}>
{m.position}
</div>
</div>
</div>
</div>
));
const content = contentTeam.map((m, index) => (
<div key={index} className={styles.member}>
<figure>
<img className="image-cover" src={m.image} alt={m.faName} />
</figure>
<div className={styles.info}>
<h3>{m.faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: m.background }}>
{m.position}
</div>
</div>
</div>
</div>
));
return (
<div className={styles.wrapper}>
<div className={styles.membersWrapper}>
<div>{management}</div>
<div>{development}</div>
<div>{ux}</div>
<div>{content}</div>
</div>
</div>
);
uj5u.com熱心網友回復：
很多這些答案都很好而且很清楚，但是我不喜歡它們都在陣列上使用多次迭代，因為您可以使用reduce 一次掃描完成所有操作。例子：
const Team = ({ image, faName, background, position }) => (
<div className={styles.member}>
<figure>
<img className="image-cover" src={image} alt={faName} />
</figure>
<div className={styles.info}>
<h3>{faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: background }}
>
{position}
</div>
</div>
</div>
</div>
);
export default function App() {
const teams = members.reduce((acc, current, index) => {
const team = current.team;
const content = <Team key={index} {...current} />;
if (team in acc) {
acc[team].push(content);
} else {
acc[team] = [content];
}
return acc;
}, {});
console.log(teams);
return (
<div className={styles.wrapper}>
<div className={styles.membersWrapper}>
<div>{teams.management}</div>
<div>{teams.development}</div>
<div>{teams.ux}</div>
<div>{teams.content}</div>
</div>
</div>
);
}
如果您需要讓每個團隊都不同并且不能使用一個組件，那么您可以創建單獨的組件并使用 switch 陳述句代替，if (team in acc) 或者您可以使用物件和鍵值對。
uj5u.com熱心網友回復：
創建一個包含三個陣列的陣列：
const arr = [ [ /* first array */ ], [ /* second array */ ], [ /* third array */ ] ]
arr.forEach(x=>{
x.map( /* map content for each array */ )
}
uj5u.com熱心網友回復：
我會在下面做這樣的事情。
注意：它不是一個高性能的解決方案，因為它遍歷每個團隊專案的成員陣列。僅適用于小資料。
function MyApp() {
const component = team =>
members
.filter(m => m.team === team)
.map((m, index) => (
<div key={index} className={styles.member}>
<figure>
<img
className="image-cover"
src={m.image}
alt={m.faName}
/>
</figure>
<div className={styles.info}>
<h3>{m.faName}</h3>
<div className={styles.titleWrapper}>
<div
className={styles.snackItem}
style={{ backgroundColor: m.background }}
>
{m.position}
</div>
</div>
</div>
</div>
));
const teams = ["management", "development", "UX", "content"];
return (
<div className={styles.wrapper}>
<div className={styles.membersWrapper}>{teams.map(component)}</div>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395613.html
標籤：javascript 数组 反应 筛选