React map遍历中如何让指定文本仅显示一次而非重复渲染

这里有两种实用方案解决你的问题：

方案一：将文本移到循环外部（推荐） #

把需要只显示一次的{text}从map循环的返回内容中抽出来，放在循环外层的容器里，这样它就只会渲染一次，不会随循环次数重复。

<div>
  {text} {/* 仅渲染一次 */}
  {someArr.map((col, i) => {
    return (
      <div key={i}>
        {someRule === someOtherRule && (
          <Icon/>
        )}
      </div>
    )
  })}
</div>

这种方式逻辑最清晰，也符合React组件渲染的最佳实践——毕竟文本不需要和每个循环项绑定在一起。

方案二：通过循环索引控制仅在首次渲染时显示 #

如果业务需求要求文本必须出现在循环生成的某个div内（比如第一个循环项的容器里），可以利用map的索引参数i，判断仅当索引为0时才渲染文本：

someArr.map((col, i) => {
  return (
    <div key={i}>
      {i === 0 && text} {/* 只有第一次循环会渲染这个文本 */}
      {someRule === someOtherRule && (
        <Icon/>
      )}
    </div>
  )
})

注意：如果someArr是空数组，这种方式下文本不会被渲染，需要根据实际业务场景调整（比如在循环外额外判断数组为空时是否显示文本）。

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