React Typescript Props Interface 包含一个接口

Question

我有一个功能组件从另一个功能组件接收道具。我在接收组件上有一个接口，该接口也包含一个接口，但当我登录控制台时，该接口始终为“未定义”。但是，下面道具的值包含我期望填充到我的比赛界面中的数据。我的组件是：

import React, { useState } from 'react';
import { ICompetition } from '../interfaces/ICompetition';

interface CompetitionProps {
   competition: ICompetition;
}

function Competition(props: CompetitionProps) {
    console.log(props);
    console.log(props.competition);
    return (
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div id={props.competition.competitionId.toString()} className="text-left" style={{minWidth: 0, textOverflow: 'ellipsis', overflow: 'hidden'}}>                            
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Competition;

我正在使用来自以下组件的传播运算符将数据发送到此组件：

import React, { useEffect, useState, } from 'react';
import "../App.css";
import { ICompetition } from '../interfaces/ICompetition';
 import Competition from './Competition';

interface HomeProps {
    bookmakerid: string | null;
}

function Home(props: HomeProps) {
    const [compList, setData] = useState<ICompetition | null>(null);
    const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);

    useEffect(() => {
        fetch("http://localhost:5242/Competitions?bid=" + props.bookmakerid, { method: "POST" })
            .then(response => {
                if (response.ok) {
                    //console.log(response);
                    return response.json();
                }
            })
            .then(data => {
                 setData(data);
            })
            .catch(err => {
                setError(err)
            });
    }, []);
    console.log(compList);
    return (
    <section className="section section-variant-1 bg-gray-100">
        <div className="isotope-item" data-filter="football">
            <div className="sport-table">
                <div className="sport-table-tr">

                    <div id="runnerContainer" className="carousel-inner">
                        {compList && compList instanceof Array && compList.map((comp) => (                                
                            <Competition competition={...comp} key={comp.competitionId } />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    </section>
);
}

export default Home;

我的ICompetition接口定义如下

export interface ICompetition {
    competitionId: number;
    bookmakerId: number;
    competitionName: string;
    sportId: number;
    lastUpdated: Date;    
    venue: string;
    competitionDate: Date;
    downloadable: boolean;
    displayHead: boolean;
    headerText: string;
    competitionStatus: number;    
    sortOrder: number;
    errorCode: string;
}

任何关于我如何让它工作的帮助将不胜感激。

Answer 1

最后我设法通过删除传播运算符解决了这个问题

{compList && compList instanceof Array && compList.map((comp) => (                                
        <Competition competition={comp} key= {comp.competitionId } />                           
))}

干得好我！ :)

Answer 2

  {compList && compList instanceof Array && compList.map((comp) => (                                
    <Competition competition={...comp} key={comp.competitionId } />
  ))}

{...comp} 此代码 -> {comp}
和
在 map 函数参数中添加类型：comp -> comp: ICompetition
像这样

  {compList?.map((comp: ICompetition) => (                                
    <Competition competition={comp} key={comp.competitionId } />
  ))}

然后你就可以根据需要在控制台上查看它是否运行良好。

希望这对你有帮助。