reactjs - REACT การส่งอาร์เรย์ไปยังคอมโพเนนต์ลูก

ฉันกำลังพยายามเรียนรู้ React กับ TypeScript และไม่แน่ใจว่าทำไมฉันถึงได้รับข้อผิดพลาดนี้

ฉันมีแอปบัตรของฉัน:

public state = {
    cards: []
};


public render() {
    return (
        <div>
            <Form onSubmit={this.addNewCard}/>
            <CardList cards={this.state.cards}/>
        </div>
    );
}

รายการบัตรคือ:

const CardList = (props: ICard[]) => {
    return (
        <div>            
            { props.map((card: ICard) => <Card key={card.id} {...card} />) }   
        </div>
    )
}

ด้วยสิ่งนี้ฉันได้รับข้อผิดพลาด Type '{ cards: never[]; }' ไม่สามารถกำหนดค่าให้กับประเภท 'IntrinsicAttributes & ICard[]' ได้ Type '{ cards: never[]; }' ไม่สามารถกำหนดค่าให้กับประเภท 'ICard[]' ได้ Property 'length' ขาดหายในประเภท '{ cards: never[]; }'.

อย่างไรก็ตาม ถ้าฉันสร้างอินเทอร์เฟซ ICards:

interface ICards {
    cards: ICard[]
}

และใช้สิ่งนั้น จากนั้น รายการบัตรคือ:

const CardList = (props: ICards) => {
    return (
        <div>            
            { props.cards.map((card: ICard) => <Card key={card.id} {...card} />) }
        </div>
    )
}

สิ่งนี้ทำงานได้ดี แต่ฉันมีความเข้าใจว่า <CardList cards={this.state.cards}/> กำลังส่งผ่านอาเรย์ และไม่ได้เป็นอ็อบเจ็กต์ที่มีคุณสมบัติเป็นอาเรย์ ดังนั้นอินเทอร์เฟซ ICards จึงไม่จำเป็น

คำตอบ #1

วัตถุ props ไม่ใช่อาร์เรย์ cards แต่คีย์ cards ในวัตถุ props นั้นใช่

คุณสามารถเขียนมันแบบนี้ได้:

const CardList = (props: { cards: ICard[] }) => {
  return (
    <div>{props.map((card: ICard) => <Card key={card.id} {...card} />)}</div>
  );
};