Astro.js中遍历JSON数组生成独立<li>元素的问题求助

我明白你现在遇到的问题了——你想把roleList数组里的每一项都生成独立的<li>元素，但现在所有内容都挤在同一个<li>里，对吧？

咱们先拆解下问题根源：你当前的代码是遍历外层的portData数组，每遍历一个元素就生成一个<li>，然后直接把整个roleList数组塞了进去。因为数组在Astro的JSX模板语法里会被自动转换成逗号分隔的字符串，所以就出现了所有角色都堆在同一个列表项里的情况。

解决思路很清晰，我们需要做嵌套遍历：先遍历外层的portData数组，然后对每个portData项里的roleList数组再做一次遍历，这样每个角色就能对应一个独立的<li>了。

先回顾下你的原始数据和代码：

portData.json 片段

"roleList": [ "UX/UI & Strategy", "Art Direction", "Prototyping" ],

原始 Astro 代码

<ul class="list-none text-base font-light">
   {
     portData.map((portItem) => {
       return ( 
         <li>{portItem.roleList}</li>
       )
     })
   }
</ul>

修改后的代码方案 #

如果portData是一个包含多个项目的数组，用嵌套遍历：

<ul class="list-none text-base font-light">
  {
    portData.map((portItem) => {
      // 遍历当前项目的roleList，为每个角色生成独立<li>
      return portItem.roleList.map((role) => {
        return <li>{role}</li>
      })
    })
  }
</ul>

如果你的portData其实是单个对象（而非数组），那更简单，直接遍历roleList即可：

<ul class="list-none text-base font-light">
  {
    portData.roleList.map((role) => {
      return <li>{role}</li>
    })
  }
</ul>

这样修改后，roleList里的每一项都会被转换成单独的<li>元素，就不会再挤在一起啦。

备注：内容来源于stack exchange，提问作者troyofcreative