我有這段代碼，它使用 map 函式來遍歷一個物件
物件架構是這個： result_petrol_data.result
{
"id": 51019,
"name": "BEYFIN",
"fuels": [
{
"id": 43917493,
"price": 1.669,
"name": "Benzina",
"fuelId": 1,
"isSelf": false
},
{
"id": 43917492,
"price": 1.639,
"name": "Benzina",
"fuelId": 1,
"isSelf": true
}
],
"location": {
"lat": 00.1234567890,
"lng": 5.1234567890
},
"insertDate": "2022-10-10T07:47:59 02:00",
"address": "Via Roma something",
"brand": "Beyfin"
}
maxResult是我想要的結果串列的最大長度
第一張地圖遍歷所有結果
第二個檢查該特定燃料分配器的所有汽油泵
let finalList = result_petrol_data.results.slice(0, maxResult).map((row, index) => {
row.fuels.map((fuel) => {
//Check if the pump is the selected fuel preference
if (fuel.name == fuel_type_selected) {
fuel_price = fuel.price.toString().replace('.', ',');
//Checks that the pump has the preferred dispensing method selected by the user
if (fuel.isSelf == is_fuelpump_selfservice) {
return (<tr key={index} ><td>{row.name}</td> </tr>)
}
else if (is_fuelpump_selfservice === undefined) {
return (//tr with some style changes)
}
}
})
})
最后，當我在設定為 5的情況下列印這樣finalList的表格時：maxResult
<Table striped hover responsive size="sm">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Prezzo</th>
<th scope="col">??</th>
</tr>
</thead >
<tbody>
{listItems}
</tbody>
</Table>
我應該看到 5 個帶有 name 值的表行，如下所示：
<tr key=0 ><td>Name 1</td> </tr>
...
<tr key=4 ><td>Name 5</td> </tr>
相反，我得到了 5 個像這樣的未定義值（顯然沒有顯示）：
[
null,
null,
null,
null,
null
]
uj5u.com熱心網友回復：
首先，您需要過濾具有您想要的汽油型別的結果
const validResults = result_petrol_data
.results
.filter(result => result
.fuels
.some(fuel => fuel.name === fuel_type_selected)
);
然后你可以對它們進行切片以獲得你想要的 N 個結果
const validNResults = validResults.slice(0, maxResult);
現在您可以映射它們以創建您想要的元素。（你需要return）
const finalList = validNResults
.map((row, index) => {
const fuelToUse = result
.fuels
.find(fuel =>
fuel.name === fuel_type_selected &&
(fuelToUse.isSelf === is_fuelpump_selfservice || is_fuelpump_selfservice === undefined)
);
if (fuelToUse.isSelf === is_fuelpump_selfservice) {
return (<tr key={index}><td>{row.name}</td></tr>);
} else if (is_fuelpump_selfservice === undefined) {
// return tr with some style changes
return (<tr key={index}><td>{row.name}</td></tr>);
}
})
uj5u.com熱心網友回復：
你忘記在你的 .map() 呼叫中回傳一些東西。您可能想要：在第一個回傳行，并且：在第二個回傳燃料
編輯：實際上你只是錯過了外部 map() 中的 reutrn 陳述句
uj5u.com熱心網友回復：
您必須在兩個地圖回圈內回傳。
let finalList = result_petrol_data.results.slice(0, maxResult).map((row, index) => {
**return** row.fuels.map((fuel) => {
//Check if the pump is the selected fuel preference
if (fuel.name == fuel_type_selected) {
fuel_price = fuel.price.toString().replace('.', ',');
//Checks that the pump has the preferred dispensing method selected by the user
if (fuel.isSelf == is_fuelpump_selfservice) {
return (<tr key={index} ><td>{row.name}</td> </tr>)
}
else if (is_fuelpump_selfservice === undefined) {
return (//tr with some style changes)
}
}
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/513614.html