亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何遍歷對象內的嵌套數組?

如何遍歷對象內的嵌套數組?

RISEBY 2021-12-23 10:37:41
所以這是帶有 3 個對象的 JSON 文件export const Projects = [  {    id: 1,    name: 'Site 1',    tech: [      'HTML',      'CSS',      'SASS',      'React'    ],    description: 'Lorem1',    image: '/Image4.jpg'  },  {    id: 1,    name: 'Site 2',    tech: [      'HTML',      'CSS',      'SASS',      'React'    ],    description: 'Lorem2',    image: '/Image4.jpg'  },  {    id: 1,    name: 'Site 3',    tech: [      'HTML',      'CSS',      'SASS',      'React'    ],    description: 'Lorem3',    image: '/Image4.jpg'  }];我正在嘗試遍歷“技術”數組并自行返回每個項目。當我循環遍歷它們時,現在我只能得到完整的數組,并且只能將它們全部放入一個 div 中。這就是我目前的做法,它與其他部分一起工作得很好,但是,我如何接收帶有單個對象的“技術”部分,而不僅僅是一個數組?const Portfolio = () => {   const portfolioItem = Projects.map((project, i) => {     return <Item     key={i}     image={Projects[i].image}     description={Projects[i].description}     name={Projects[i].name}     tech={Projects[i].tech}       />   })
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

假設techprop 的渲染以簡單的方式實現,如下所示:


const Item = ({tech}) => <div>{tech}</div>

然后你可以將字符串數組映射到 React 元素數組:


<Item

  key={i}

  image={Projects[i].image}

  description={Projects[i].description}

  name={Projects[i].name}

  tech={Projects[i].tech.map((t) => <span>{t}</span>)}  

/>

或者,您可以使用顯式分隔符將數組轉換為單個字符串:


     tech={Projects[i].tech.join(', ')}  


查看完整回答
反對 回復 2021-12-23
  • 1 回答
  • 0 關注
  • 259 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號