在反应中转换为 .tsx 后，组件未呈现任何记录

Question

我有 ResultTable.jsx 个文件。

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Certificate from './models/certificate';
import axios from 'axios';

const ResultTable = ({certificate}) => {
    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

在结果中正确呈现记录table。但是当我将它转换为 .tsx 文件时，因为我的项目标准，它没有呈现任何记录。我还更改了第一行并给出了类型。 const ResultTable = (certificate:any) 当我使用 console.log 在 .tsx 文件中打印时，它正在打印输出。

我犯了什么小错误？下面是.tsx文件

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Certificate from './models/certificate';

    import axios from 'axios';
    
    const ResultTable = (certificate:any) => {

        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

Answer 1

const ResultTable = ({certificate}) => {

const ResultTable = (certificate:any) => {

您从 destructuring 道具切换到不破坏道具。您需要：

const ResultTable = ({certificate}:any) => {

当然，这可以通过为道具定义类型来改进，而不是 any。

在反应中转换为 .tsx 后，组件未呈现任何记录

Component is not rendering any record after converting into .tsx in react

javascript

jsx

typescript

reactjs

tsx