React拆分ListCertificate组件的form与ResultTable后表格不渲染问题

根因分析 #

React 函数组件的第一个入参是完整的 props 对象，你通过<ResultTable response={response}>传递的数组挂载在props.response属性上，而非直接作为入参本身。直接对props对象调用map方法会抛出类型错误，导致渲染失败。

修复方案 #

方案1：解构 props 取属性（推荐） #

定义子组件时直接解构出你传递的response字段，同时加默认空数组兜底避免undefined报错：

const ResultTable = ({ response = [] }) => {
  return (
    <table>
      {/* 原有表格渲染逻辑 */}
      {response.map(item => (
        <tr key={item.id}>
          <td>{item.certName}</td>
          <td>{item.expireTime}</td>
          {/* 其余字段渲染逻辑 */}
        </tr>
      ))}
    </table>
  )
}

方案2：手动从 props 中取值 #

如果不习惯解构写法，可以手动从props对象中提取属性：

const ResultTable = (props) => {
  const response = props.response || []
  // 后续渲染逻辑和方案1完全一致
}

额外优化建议 #

• 列表渲染必须给每一项添加唯一key属性，优先使用业务唯一ID（比如证书ID），不要用数组索引作为key（数组发生增删、排序时会出现渲染异常）
• 父组件调用子组件时也可以加兜底逻辑，避免接口返回异常导致报错：

<ResultTable response={response ?? []} />

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