与 Typescript 反应 - Type { } 缺少 type 中的以下属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55133907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React with Typescript - Type { } is missing the following properties from type
提问by Cactusman07
I'm trying to learn React with TypeScript, and I seem to keep running into TS errors that are a bit vague.
我正在尝试使用 TypeScript 学习 React，但我似乎一直遇到有点模糊的 TS 错误。
I have code written below in three files, which works fine when compiled and run. I just keep getting this error thrown by TypeScript that is super annoying
我在下面的三个文件中编写了代码，在编译和运行时可以正常工作。我只是不断收到 TypeScript 抛出的这个超级烦人的错误
"Type '{ id: any; key: any; }' is missing the following properties from type 'ProfileCardProps': login, name"
“类型 '{ id: any; key: any; }' 缺少类型 'ProfileCardProps' 中的以下属性：登录，名称”
// Form.tsx
// 表格.tsx
import * as React from 'react';
import Axios from 'axios';
export default class Form extends React.Component<any,any>{
constructor(props: any){
super(props);
this.state = { userName: ""};
}
handleSubmit = (event: React.FormEvent<EventTarget>): void => {
event.preventDefault();
//get request...
.then(resp => {
this.props.onSubmit(resp.data);
console.log(resp.data);
this.setState({userName: ''});
};
public render() {
return(
<div>
<div className="col-sm-12">
<form onSubmit={this.handleSubmit}>
<label>Run lookup:<br />
<input type="text"
value = {this.state.userName}
onChange = {(event) => this.setState({userName: event.target.value})}
placeholder = "Enter Username..." >
</input>
</label>
<button type="submit">Add user info</button>
</form>
<br />
</div>
</div>
);
};
}
// Card.tsx
// 卡片.tsx
import * as React from 'react';
interface ProfileCardProps{
login: string;
name: string;
}
const ProfileCard = (props: ProfileCardProps) => {
return(
<div className="card col-xs-1 col-sm-6 col-md-4 col-lg-3">
<div className="profileWrapper">
<div className="userName">
<p>{props.login}</p>
</div>
<div className="user">
<h3>{props.name}</h3>
</div>
</div>
</div>
)
}
const CardList = (props: { cards: { map: (arg0: (card: any) => JSX.Element) => React.ReactNode; }; }) => {
return(
<div className="row">
// This is the line that is throwing the error
{props.cards.map((card: { id: any; }) => <ProfileCard key={card.id} {...card} />)}
</div>
)
}
export default CardList;
//ProfileList
//配置文件列表
import * as React from 'react';
import Form from './Form';
import CardList from './ProfileCard';
import "./ProfileStyles.scss";
export default class Profiles extends React.Component<any, any>{
state = {
cards: [
{ login: "exampleLogin",
name:"exampleName",
key: 1
},
{ login: "exampleLogin2",
name:"exmapleName2",
key: 2
}
]
}
addNewCard = (cardInfo: any) => {
this.setState((prevState: { cards: { concat: (arg0: any) => void; }; }) => ({
cards: prevState.cards.concat(cardInfo)
}));
}
public render() {
return(
<div className="cardSection">
<h2>Profiles</h2>
<Form onSubmit={this.addNewCard} />
<CardList cards={this.state.cards} />
</div>
)
};
}
回答by Amol B Jamkar
As you are passing card to ProfileCard component, its passing 4 values in props.
当您将 card 传递给 ProfileCard 组件时，它会在 props.conf 中传递 4 个值。
{login: string, name: string, key: number, id: number}
But your interface has only 2
但是你的界面只有 2
interface ProfileCardProps{
login: string;
name: string;
}
Adding key and id should solve the issue.
添加 key 和 id 应该可以解决问题。
interface ProfileCardProps{
login: string;
name: string;
id:any;
key: any;
}
