SPFx/React中Map语句内条件渲染失效问题求助

你的代码无法渲染内容的核心问题是：map回调函数使用了代码块{}包裹逻辑，但在if条件满足时没有返回对应的JSX元素，导致map最终返回的是一组undefined，React不会渲染这类无效内容。

以下是三种可行的修复方式，同时补充了React列表渲染必需的key属性（避免控制台警告）：

方案1：在if块内添加return语句 #

{spListItems && spListItems.map((list, index ) => {
  if (index > 20){
    return (
      <p key={list.UniqueId}>
        <button type="button" className={styles.btn} onClick={()=>this.clickHandler(list.UniqueId)}>
          {index} + {list.Title}
        </button>
      </p>
    )
  }
  // 索引<=20时返回null，避免返回undefined
  return null;
})}

方案2：用三元表达式简化逻辑（无需代码块） #

{spListItems && spListItems.map((list, index ) => 
  index > 20 ? (
    <p key={list.UniqueId}>
      <button type="button" className={styles.btn} onClick={()=>this.clickHandler(list.UniqueId)}>
        {index} + {list.Title}
      </button>
    </p>
  ) : null
)}

方案3：先过滤再映射（逻辑更清晰，推荐） #

先通过filter筛选出符合条件的项，再进行渲染，避免在map里做条件判断：

{spListItems && spListItems
  .filter((_, index) => index > 20)
  .map((list, filteredIndex ) => (
    <p key={list.UniqueId}>
      <button type="button" className={styles.btn} onClick={()=>this.clickHandler(list.UniqueId)}>
        {/* 若需要原列表的索引，可在filter时给item添加原索引属性 */}
        {list.originalIndex} + {list.Title}
      </button>
    </p>
  ))
}

// 如需保留原索引，修改filter逻辑：
// .filter((item, index) => {
//   item.originalIndex = index;
//   return index > 20;
// })

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