React项目中将jsx组件转为.tsx格式后无法渲染记录问题咨询

你最核心的错误是丢失了组件入参的解构语法：
原来JSX版本的组件入参是({certificate})，意思是从组件接收的props对象里，解构出certificate字段直接使用。
你转换为TSX的时候改成了(certificate:any)，这里的certificate实际是整个props对象，而不是props里的certificate属性。你打印的时候看到的内容应该是外层包裹了一层对象的结构：{certificate: {你实际的证书数据}}，所以直接取certificate.certificateNo本质是在props对象上找这个字段，自然找不到，也就渲染不出内容。

修复代码 #

补回解构语法，同时替换any为规范的类型标注：

import React from 'react'
import Certificate from './models/certificate';
import axios from 'axios';

// 定义组件Props类型
interface ResultTableProps {
  certificate: Certificate
}

// 补回解构，对props做类型标注
const ResultTable = ({certificate}: ResultTableProps) => {
  console.log(JSON.stringify(certificate));
  
  return (
    <tr key={certificate.certificateNo}>
      <td>{certificate.certificateNo}</td>
      <td>{certificate.sponser}</td>
      <td>{certificate.protoColNo}</td>
      <td>{certificate.startDate}</td>
      <td>{certificate.endDate}</td>
      <td>{certificate.noOfSubjects}</td>
      <td>{certificate.country}</td>
      <td>{certificate.requestStatus}</td>
    </tr>
  )
}

export default ResultTable

额外优化建议：你的代码里没有用到useState和Link，可以直接移除对应的import，避免不必要的打包体积。

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