JSON：
[
{"image_id": "base64encode",
"hw": [446, 640],
"category_id":["person", "person", "person", " frisbee"],
"bbox": [[406, 417, 115, 210], [187, 420, 89, 189], [275, 424, 95, 272], [272, 133, 34, 22]],
"score": [0.94813, 0.94638, 0.94348, 0.90018]}
]
反應代碼：
{output.map(object => (
<div class="img-overlay-wrap"style={{ marginLeft: "27%" }}>
<img src={`data:image/png;base64,${object.image_id}`} style={{ height:`${object.hw[0]}` , width:`${object.hw[1]}`}} alt="" />
<svg width={object.hw[1]} height={object.hw[0]} >
<g>
<rect x={object.bbox[0][0]} y={object.bbox[0][1] - object.bbox[0][3]} width={object.bbox[0][2]} height={object.bbox[0][3] }
style={{stroke:"red",}} fill-opacity="0.0" />
</g>
</svg>
</div>
))}
在上面的代碼中（在 Rect 標記中）我只能獲得 bbox 的一個值，因為我正在使用 bbox[0][1] 我無法遍歷其他值。我正在使用映射函式來迭代陣列物件。在 jsx 中，請給我建議如何迭代這些串列物件串列。
uj5u.com熱心網友回復：
嘗試這個 ，
{
object.bbox.map((val,index)=>
<rect x={object.bbox[index][0]} y={object.bbox[index][1] - object.bbox[index][3]} width={object.bbox[index][2]} height={object.bbox[index][3] }
style={{stroke:"red",}} fill-opacity="0.0" />
)
}
根據您的要求，您也可以映射內部陣列。我希望你有一個大致的想法，如何處理這類問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431216.html
上一篇：為水果陣列搜索正確的jq語法
下一篇：如何在php中訪問json資料