React map遍历条目时嵌套渲染flavor_profile数组方法咨询

当前代码中Flavors字段固定取entry.flavor_profile[0].name，仅访问风味数组的第一个元素，因此只会渲染单条风味值，在entries的map遍历内嵌套一层风味数组的map遍历即可实现全量渲染。

你可以直接替换对应位置的代码，以下是修改后的完整片段，默认用顿号分隔3项风味值：

return (
  <>
    <article className="entries">
      {
        entries.map(entry => {
          return <section key={`entry--${entry.id}`} className="entry">
            <div>
              <ul>
                <div><img src={entry.image} height="300" /></div>
                <li>Name: {entry.name}</li>
                <li>Brewing Method: {entry.brewing_method.type}</li>
                <li>Grind Setting: {entry.grind_setting}</li>
                <li>Rating: {entry.rating}</li>
                {/* Flavors字段修改为嵌套遍历渲染 */}
                <li>
                  Flavors:
                  {entry?.flavor_profile?.map((flavor, idx) => (
                    <span key={flavor.id || `flavor-${idx}`}>
                      {flavor.name}
                      {/* 非最后一项风味后加分隔符 */}
                      {idx !== entry.flavor_profile.length - 1 ? '、' : ''}
                    </span>
                  ))}
                </li>
                <li>Notes: {entry.notes}</li>
              </ul>
            </div>
          </section>
        })
      }
    </article>
  </>
)

• 嵌套map遍历生成的元素必须加唯一key属性，如果风味数据本身自带唯一id，优先用id作为key值，没有唯一id时可以用遍历索引兜底。
• 可选链操作符需要补全：原代码中entry?.flavor_profile[0]写法存在报错风险，当flavor_profile字段不存在时，直接取[0]会触发JS错误，正确写法为entry?.flavor_profile?.[0]。
• 如果需要将风味渲染为独立列表项，只要把上述代码中包裹风味名的<span>替换为<li>，外层嵌套一层<ul>标签即可，可根据自身样式需求调整结构。

内容的提问来源于stack exchange，提问作者Destiny