Typescript React 無法識別傳遞給功能組件的道具，ts 2740

Question

所以我正在使用打字稿進行反應項目。

我想要實現的是：使用反應功能組件和打字稿，以每個角色 1 張卡片的形式顯示從 API 獲取的電影角色數據。

什么不起作用：在嘗試渲染組件時，由於打字稿而無法編譯。

為此，這是我的容器：

import React, { useState, useEffect } from 'react';
import { API, APILINK } from '../adapters/api';
import {Card} from '../Component/Card';

type propsDef = { cardInfo: any; displayCards: (cardData: any) => any };

export const AllCards: React.FC<propsDef> = () => {

    const [cards, setCards] = useState([]);
    const [cardsDisplay, setCardsDisplay] = useState([]);

    useEffect( () => {
        API.getAPI(`${APILINK}people/?page=1`).then(data => setCards( data ) );
    });

    const displayCards = (cardData: any) => {
        const newCards = cards.filter( card => card.name === cardData[name] )
        setCards(newCards)
        return setCardsDisplay([...cardsDisplay + cardData]);
    };

    return (
        <div>
            {
                cards.map(card => {
                    <Card cardInfo={card} displayCards={displayCards}/>
                })
            }
        </div>
    )
}

這是我的組件：

type TheProps = {
    // do Type the props 
    // cardInfo: [name: string, height: string, mass: string, hair_color: string],
    name: string,
    height: string,
    mass: string, 
    hair_color: string, 
    birth_year: string, 
    gender: string, 
    homeworld: string, 
    films: string[],
    displayCards: (data: any) => any,
    cardInfo: (
    ) 
    => any
    // use arrow function and specify all params
};

export const Card: React.FC<TheProps> = ( { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards ) => {

    const handleClick = (data: object) => {
        return displayCards(data)
    };

    // const { name, height, mass, hair_color, birth_year, gender, homeworld, films } = cardInfo
    // const cardInfoStuff = { name:string, height:string }
    return (
        <section onClick={ e => handleClick( {name, height, mass, hair_color, birth_year, gender, homeworld, films } ) }>
            <h2> {name} </h2>
            <dl>
                <dt className="visually-hidden"> height </dt>
                <dd> {height} </dd>

                <dt className="visually-hidden"> birth_year </dt>
                <dd> {birth_year} </dd>

                <dt className="visually-hidden"> homeworld </dt>
                <dd> {homeworld} </dd>

                <dt className="visually-hidden"> mass </dt>
                <dd> {mass} </dd>

                <dt className="visually-hidden"> hair_color </dt>
                <dd> {hair_color} </dd>

                <dt className="visually-hidden"> gender </dt>
                <dd> {gender} </dd>
            </dl>
        </section>
    )
}

當前的問題是我的代碼無法在這一行編譯

cards.map(card => {
    <Card cardInfo={card} displayCards={displayCards}/>
})

錯誤是給我在 Card 類關鍵字上：

Type '{ cardInfo: any; displayCards: (cardData: any) => void; }' is missing the following properties from type 'TheProps': name, height, mass, hair_color, and 4 more.ts(2740)

誰能幫我嗎？

Answer 1

你必須正確地解構你的道具。 所以

export const Card: React.FC<TheProps> = ( { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards ) => {

應該

export const Card: React.FC<TheProps> = ( { cardInfo: { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards }: TheProps ) => {

然后你的道具必須相應地映射

type TheProps = {
  cardInfo: {
    name: string;
    height: string;
    mass: string;
    hair_color: string;
    birth_year: string;
    gender: string;
    homeworld: string;
    films: string[];
  };
  displayCards: (data: any) => any;
};