React 没有从另一个组件渲染数据

Question

我在button 下创建了以下代码。它在table body 里面。

                              <button className="btn btn-sm btn-outline-secondary" onClick={()=>popUp()} > 
                                        
                                        {flag &&  (   
                                                <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>
                                            )}
                                            <i className="bi bi-search">
                                                 
                                            </i>
                                        </button>

以上数据是特定组件中表格的一部分。

现在，当我尝试在另一个组件中编写相同的代码时，它只打印静态数据，但不呈现结果。

import React from 'react'

const TablePopup = (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

我通过写作将其称为App

  <TablePopup certificate={certificate}/>

certificate 是数组变量。 response.map((certificate: Certificate,index:number) => {

Answer 1

根据我的说法，证书道具应该像这样在 TablePopup 组件中解构以在组件中使用它或使用 props.certifcate

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