React中如何通过.map方法仅渲染数组内的指定元素？

要实现只渲染指定id的元素，核心是先过滤数组再渲染，同时要修正key的错误用法，具体看下面两种实用方案：

方案一：过滤后映射（支持多个符合条件的元素） #

先通过filter筛选出符合条件的元素，再用map渲染，适合需要展示多个匹配项的场景：

<div>
  <img src={shortArrow} alt="shortArrow"/>
  {/* 先过滤出id为1的元素，再映射渲染 */}
  {paraContent
    .filter(para => para.id === 1)
    .map(para => {
      // key必须用元素的唯一标识（比如id），不能用固定值
      return <Paragraph {...para} key={para.id} />
    })}
</div>

• filter会返回仅包含id=1元素的新数组，确保只有目标内容被渲染
• 必须用每个元素的唯一值做key（比如para.id），固定值key={0}会导致React无法正确跟踪列表项状态，引发渲染异常

方案二：直接查找单个元素（高效适配单元素场景） #

如果确定只会有一个匹配元素，用find更高效（找到第一个匹配项就停止遍历）：

// 提前找到目标元素
const targetPara = paraContent.find(para => para.id === 1);

<div>
  <img src={shortArrow} alt="shortArrow"/>
  {/* 找到元素则渲染，没找到就不渲染 */}
  {targetPara && <Paragraph {...targetPara} key={targetPara.id} />}
</div>

• find直接返回匹配的元素对象，通过&&短路求值实现“存在则渲染”的逻辑
• 同样要使用元素的id作为key，保证React渲染的正确性

内容的提问来源于stack exchange，提问作者ang.jr57