當 React map() 遇到資料陣列長度不一時，如何避免map()停止？

react map() js

gogolen777 2022-05-29 17:16:46 ‧ 608 瀏覽

分享至

本人為前端新手，用詞可能不精確，煩請各位大神包容 ><
----以下正文----

//這邊我先將資料庫裡的資料用空白鍵切割
const a = pic_path.split(" ");

return (
<a href={/Product/1/${ID}}>
//再將切割好的字串做為圖片輸出的路徑
{a.map((r) => (
<img alt="robot" src={require(../../Assets/ProductImg/${a[2]})} />
))}

我的圖片最少是一張，最多五張，所以在 ${a[0]} 時會有畫面
但在 ${a[1]} 時畫面就會消失，
而如果我在資料庫把圖片只有一張的那個資料新增一張，那在打 ${a[1]} 時也會有畫面，
所以想請教各位大神，該如何在這種狀態下不論照片資料數量都能map()出來呢？
謝謝大家><

froce iT邦大師 1 級 ‧ 2022-05-29 21:11:47 檢舉

用個迴圈對array做遍歷啊...
你都用map了，幹嘛還要指定index?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

前端野人

iT邦新手 3 級 ‧ 2022-06-01 09:41:03

你是說你的圖片陣列是不固定的是吧？
你要就是用 useState去更新圖片陣列

另外

{a.map((r) => (
<img alt="robot" src={require(../../Assets/ProductImg/${a[2]})} />
))}

你要的類似寫法應該是

{a.map((r,index) => {
if(index ===2){
return <img alt="robot" src={require(../../Assets/ProductImg/r})} />
}
return (
<img alt="robot" src={require(../../Assets/ProductImg/${r})} />
)}
)}

不知道有沒有回到到你的問題

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙