我正在撰寫代碼以使用 API 資料制作 Web 視圖以顯示在視窗中，但遇到了一些問題。誰能幫我解決這個問題？
也許我不擅長說英語讓你理解，我做了一些我想做的照片。
首先，我有一個這樣的陣列
const arr1 = [
{name: 'AAA', no: 23},
{name: 'BBB', no: 42},
{name: 'CCC', no: 33},
{name: 'DDD', no: 90},
{name: 'EEE', no: 101},
{name: 'FFF', no: 10},
]
我將它的名稱映射為 div h2 標題，而不映射到 p 標簽。這是當前條件
在此處輸入影像描述
現在我新建一個陣列，在div中添加更多的p標簽，陣列的形狀是這樣的。
const arr2 = [
{letter: 'text1', no: 90},
{letter: 'text2', no: 90},
{letter: 'text3', no: 23},
{letter: 'text4', no: 42},
{letter: 'text5', no: 101},
{letter: 'text6', no: 10},
{letter: 'text7', no: 90},
{letter: 'text8', no: 90},
]
我真正想做的是，找到arr1.no === arr2.no像這張圖片一樣在 p 標簽之后添加的元素。
在此處輸入影像描述
我想要的是;
- 如果 arr2 沒有對應 arr1 的編號，則繼續下一個
- 如果 arr2 有多個元素到 arr1 的 no 之一，則應將其添加到 p 標記的正后方。
所以我這樣編碼，
arr1.map((c, i) => {
arr2.map((v, j) => {
if (c.no === v.no) {
test.innerText = 'this title has letter: ' c.no;
}
})
})
我知道我必須制作 2 張地圖來匹配這 2 個陣列，但這不起作用。所有“這個標題有字母”都回傳相同的數字。誰能告訴我我錯過了什么？
uj5u.com熱心網友回復：
為了達到你想要的效果，你可以先通過arr1陣列映射并顯示標題和數字，然后在arr2陣列上使用過濾器來獲取具有相同數字的字母，并通過結果映射并顯示字母。您可以查看下面的代碼以更好地理解。這很容易。
export default function App() {
const arr1 = [
{ name: "AAA", no: 23 },
{ name: "BBB", no: 42 },
{ name: "CCC", no: 33 },
{ name: "DDD", no: 90 },
{ name: "EEE", no: 101 },
{ name: "FFF", no: 10 }
];
const arr2 = [
{ letter: "text1", no: 90 },
{ letter: "text2", no: 90 },
{ letter: "text3", no: 23 },
{ letter: "text4", no: 42 },
{ letter: "text5", no: 101 },
{ letter: "text6", no: 10 },
{ letter: "text7", no: 90 },
{ letter: "text8", no: 90 }
];
return (
<div>
{arr1.map((arr) => (
<div key={arr.name} style={{ border: "1px solid black",padding:"5px 10px", margin:"5px 0" }}>
<p>Title : {arr.name}</p>
<p>The title has number : {arr.no}</p>
{arr2
.filter((ar2) => ar2.no === arr.no)
.map((ar2) => (
<p key={ar2.letter}>The title has letter: {ar2.letter}</p>
))}
</div>
))}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482152.html
標籤：javascript 反应
上一篇：npm錯誤！缺少腳本：“開始”
下一篇：如何將自定義斷點添加到sx道具？