React函数组件列表渲染错误处理：跳过异常项不中断渲染

核心问题原因 #

你之前直接在map回调中写判断、或者尝试用try-catch不生效的根本原因是：当JSX执行到imgSrc={item.img.url}这行参数传递逻辑时，会立刻求值item.img.url，如果中间链路存在undefined/null，会直接抛出TypeError，中断整个渲染流程，你写的判断逻辑根本没有执行机会。

另外你现有代码存在一个无效写法：key是React内部保留的特殊属性，子组件无法通过props.key读取到传入的key值，ListItem内部的<li key={props.key}>属于冗余无效代码，直接删除即可。

推荐实现方案：前置过滤合法数据 #

最符合React数据驱动逻辑的写法是先校验过滤掉所有缺字段的无效项，再遍历渲染合法数据，从根源上避免访问不存在属性的报错，同时实现无效项自动跳过的需求。

写法1：filter + map 链式调用（可读性最高） #

const Component = (props) => {
  // 提前过滤所有不满足渲染要求的无效项
  const validList = props.list.filter(item => {
    // 按需补充所有渲染必填字段的存在性校验，可选链?.会自动判断链路属性是否存在
    return Boolean(
      item?.Id &&
      item?.title &&
      item?.img?.url
    )
  })

  return (
    <ul>
      {validList.map(item => (
        <ListItem
          key={item.Id}
          title={item.title}
          imgSrc={item.img.url}
        />
      ))}
    </ul>
  )
}

// 修正后的ListItem子组件
const ListItem = (props) => {
  return (
    <li>
      <h4>{props.title}</h4>
      <div>
        <img src={props.imgSrc} alt="thumbnail" />
      </div>
    </li>
  )
}

写法2：reduce 一次性完成过滤+渲染（少一次遍历） #

如果列表数据量很大不想做两次遍历，可以用reduce在一次循环里完成校验和渲染节点生成，效果和上面的写法完全一致：

const Component = (props) => {
  return (
    <ul>
      {props.list.reduce((renderNodes, item) => {
        // 校验不通过直接跳过，不加入渲染结果
        if (!item?.Id || !item?.title || !item?.img?.url) {
          return renderNodes
        }
        renderNodes.push(
          <ListItem
            key={item.Id}
            title={item.title}
            imgSrc={item.img.url}
          />
        )
        return renderNodes
      }, [])}
    </ul>
  )
}

额外兜底方案 #

如果担心子组件内部存在其他不可控的渲染异常，可以给列表外层包裹React错误边界（Error Boundary）组件，捕获子组件树的渲染错误避免整页崩溃。但要注意：错误边界无法捕获父组件自身渲染阶段发生的属性访问错误，只能作为子组件异常的兜底手段，不能替代前置的数据合法性过滤。

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