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

Posted 2023-03-13

【中文标题】在 react 中转换为 .tsx 后，组件未呈现任何记录

【英文标题】：Component is not rendering any record after converting into .tsx in react

【发布时间】：2022-01-05 02:06:50

【问题描述】：

我有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

它在结果表中正确呈现记录。但是当我因为我的项目标准将其转换为.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

【问题讨论】：

您是否尝试过定义ResultTable 属性？喜欢interface ResultTablePops = certificateNo:string,sponsor:string ... 而不是使用(certificate:any) 使用(certificate:ResultTablePops)。

【参考方案1】：

const ResultTable = (certificate) => 

const ResultTable = (certificate:any) => 

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

const ResultTable = (certificate:any) => 

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