[英]Typescript React fails to identify props passed to functional component, ts 2740
So I'm working on a react project with typescript.所以我正在使用打字稿进行反应项目。
What I'm trying to achieve: display movie character data fetched from an API in the form of 1 card per character, using react functional components and typescript.我想要实现的是:使用反应功能组件和打字稿,以每个角色 1 张卡片的形式显示从 API 获取的电影角色数据。
What doesn't work: it fails to compile because of typescript when trying to render a component.什么不起作用:在尝试渲染组件时,由于打字稿而无法编译。
To do so here is my container:为此,这是我的容器:
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>
)
}
And here is my component:这是我的组件:
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>
)
}
The current issue is that my code fails to compile on this line当前的问题是我的代码无法在这一行编译
cards.map(card => {
<Card cardInfo={card} displayCards={displayCards}/>
})
And the error is gives me is on the Card class keyword:错误是给我在 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)
Can anyone help me out?谁能帮我吗?
You must deconstruct your props properly.你必须正确地解构你的道具。 So
所以
export const Card: React.FC<TheProps> = ( { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards ) => {
should be应该
export const Card: React.FC<TheProps> = ( { cardInfo: { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards }: TheProps ) => {
and then your props must map accordingly so然后你的道具必须相应地映射
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;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.