這個問題在這里已經有了答案： 我什么時候應該在 ES6 箭頭函式中使用 return 陳述句 6 個答案 1 小時前關閉。
console.log(materialIngredientDetail)
[
{
"content": "asd",
"type": "one",
"certificationNum": "1123-522",
"functionalList": [
{
"id": 132,
"valueUnit": "mg",
"functionalDisplayTxt": "hi"
},
{
"id": 133,
"valueUnit": "mg",
"functionalDisplayTxt": "ww"
},
{
"id": 134,
"valueUnit": "mg",
"functionalDisplayTxt": "ee"
},
{
"id": 135,
"valueUnit": "mg",
"functionalDisplayTxt": "ff"
}
]
},
{
"content": "qwe",
"type": "two",
"certificationNum": "421-123",
"functionalList": [
{
"id": 129,
"valueUnit": "mg",
"functionalDisplayTxt": "aa"
},
{
"id": 130,
"valueUnit": "mg",
"functionalDisplayTxt": "bb"
}
]
}
]
我正在嘗試使用 map 函式以 JSX 語法顯示它。
<div>
{materialIngredientDetail.map((Fields, index) => (
<Fragment key={`${Fields}~${index}`}>
<Card title={`${Fields.type} - ${Fields.certificationNum} - ${Fields.content}`}>
{Fields.functionalList.map((value, key) => {
<>
<p>{value.id}</p>
<p>{value.functionalDisplayTxt}</p>
<p>123</p>
<p>{value.valueUnit}</p>
</>
})}
</Card>
</Fragment>
))}
</div>
問題是輸出正常，沒有錯誤，但是這里的代碼部分沒有輸出資料值。
{Fields.functionalList.map((value, key) => {
<>
<p>{value.id}</p>
<p>{value.functionalDisplayTxt}</p>
<p>123</p>
<p>{value.valueUnit}</p>
</>
})}
使用 InputFields 引數值是否不能再次使用 map 函式？
我應該如何修改代碼？
uj5u.com熱心網友回復：
您沒有從第二張地圖回傳 jsx。試試下面列出的代碼
{Fields.functionalList.map((value, key) => {
return (<>
<p>{value.functionalDisplayTxt}</p>
<p>123</p>
<p>{value.valueUnit}</p>
</>)
})}
要么
{Fields.functionalList.map((value, key) => (<>
<p>{value.functionalDisplayTxt}</p>
<p>123</p>
<p>{value.valueUnit}</p>
</>)
)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456292.html
標籤：javascript 反应 json ecmascript-6