React组件在map函数中无法渲染内容的问题求助

你的问题出在map回调函数没有返回JSX元素：虽然console.log能正常执行，但if分支里的<div>AAAAAAA</div>只是声明了，没有通过return返回给map函数，导致map最终生成的数组里全是undefined，React不会渲染undefined内容。

另外，React列表渲染必须给每个项加唯一的key属性，不然会触发控制台警告，也不利于性能优化。

修复方案1：显式return元素 #

window.COMPOSITE_CATEGORIES.map((category) => {
  if(category.composites.length > 0){
    console.log(category);
    // 加return返回元素，同时添加唯一key
    return <div key={category.id}>AAAAAAA</div>
  }
  // 不满足条件时返回null，避免返回undefined
  return null;
})

修复方案2：用隐式返回+三元表达式（更简洁） #

window.COMPOSITE_CATEGORIES.map((category) => 
  category.composites.length > 0 ? (
    <div key={category.id}>AAAAAAA</div>
  ) : null
)

说明：key建议使用每个category的唯一标识（比如category.id），如果没有现成的唯一值，也可以临时用index（但不推荐在列表顺序会变化的场景使用）。

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