React调用自定义TablePopup组件无法渲染certificate动态数据如何解决

问题原因 #

React函数组件的第一个入参是props属性对象，你给子组件传递的certificate参数，实际上是挂载在props对象下的一个属性。你当前直接将入参命名为certificate，相当于你拿到的是整个props对象，而非你传递的certificate数据本身，所以所有动态取值的路径都错误，自然渲染不出数据。

解决方法 #

推荐直接从props中解构出你需要的certificate参数，仅需要修改子组件的定义行即可，其余代码无需变动：

import React from 'react'

// 这里从入参中解构出certificate属性，同时修正类型定义
const TablePopup = ({certificate}:{certificate:any}) => {
    return (
        <div className="popup-box">
        <div className=" container box">
        <span className="close-icon" >x</span>    
        <div >
           <table className="table table-responsive" >

               <tr><td className="bg-primary">Certificate No</td><td className="bg-success">{certificate.certificateNo}</td></tr>
               <tr><td className="bg-primary">Sponsor</td><td className="bg-success">{certificate.sponser}</td></tr>
               <tr><td className="bg-primary">Protocol No</td><td  className="bg-success">{certificate.protoColNo}</td></tr>
               <tr><td className="bg-primary">Start Date</td><td  className="bg-success">{certificate.startDate}</td></tr>
               <tr><td className="bg-primary">End Date</td><td  className="bg-success">{certificate.endDate}</td></tr>
               <tr><td className="bg-primary">No Of Subjects</td><td  className="bg-success">{certificate.noOfSubjects}</td></tr>
               <tr><td className="bg-primary">Country</td><td  className="bg-success">{certificate.country}</td></tr>
               <tr><td className="bg-primary">Request Status</td><td className="bg-success">{certificate.requestStatus}</td></tr>
               
           </table>
        </div>   
        </div>
        </div>
    )
}

export default TablePopup

如果你不想改解构写法，也可以保持现有入参不变，把所有动态取值的路径都加一层certificate，比如{certificate.certificate.certificateNo}，但这种写法不符合常规开发习惯，不推荐使用。

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