props 沒有將數據發送到另一個組件

Question

所以，我在做什么，我將 2 arrays 作為道具發送到另一個組件，當我從另一個組件收到該道具時，它顯示為未定義

Senddata.ts（將數據發送到其他組件的組件）

import React from "react";
import DynamicTable from "./DynamicTable";
export interface mydata {
  columns?: [{ text: string; dataField: string }];
  data?: [];
}

const Datasender = () => {
  let columns = [
    { text: "Id", dataField: "id" },
    { text: "Name", dataField: "name" }
  ];

  let data = [
    { id: 1, name: "Manikanta", age: 20, Gender: "male", expandabale: true },
    { id: 2, name: "Varsha", age: 85, Gender: "female", expandabale: true },
    { id: 3, name: "Sai", age: 18, Gender: "male", expandabale: true },
    { id: 4, name: "John", age: 24, Gender: "female", expandabale: false }
  ];

  return (
    <div>
      {data.map((data) => 
        <DynamicTable data={data} col={columns} />
      )}
    </div>
  );
};
export default Datasender;

DynamicTable.ts（從 senddata 組件接收數據的組件）

import React from 'react'
 const DynamicTable =(props: any) =>
 {
     return(
         <div className="table-responsive">
             <table className="table">
              <thead>
                  <th scope="col"> #</th>
                  {props.col.map((col: { text: React.ReactNode }) =>{
                      return <th scope="col">{col.text}</th>
                  })}
              </thead>
              <tbody>
                  <tr>
                      
                      <td></td>
                  </tr>
              </tbody>
             </table>


         </div>
     )
 }
 export default DynamicTable

當我控制台記錄道具時，它顯示為未定義，並且 map 也有錯誤未定義。 是否要對代碼進行任何修改？

Answer 1

再見，試試這個方法：

1. 為 ColumnProps 和 Data 定義一個接口：

    interface Columns { text: string, dataField: string, } interface ColumnProps { columns: Columns[]; } interface Data { id: number, name: string, age: number, Gender: string, expandabale: boolean }

2. 然后為DynamicTable道具定義類型：

    type DynamicTableProps = { data: Data, columns: ColumnProps }

3. 最后，您的DynamicTable ：

    const DynamicTable = ({ data, columns}: DynamicTableProps) => {...}