与 Typescript 反应 - 类型 缺少类型中的以下属性

Posted 2023-03-11

【中文标题】与 Typescript 反应 - 类型 缺少类型中的以下属性

【英文标题】：React with Typescript - Type is missing the following properties from type与 Typescript 反应 - 类型 缺少类型中的以下属性

【发布时间】：2019-08-03 15:48:54

【问题描述】：

我正在尝试使用 TypeScript 学习 React，但我似乎一直遇到有点模糊的 TS 错误。

我在下面三个文件中编写了代码，在编译和运行时运行良好。我只是不断收到 TypeScript 抛出的这个超级烦人的错误

“类型 ' id: any; key: any; ' 缺少来自类型 'ProfileCardProps' 的以下属性：登录名、名称”

// Form.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

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;

//配置文件列表

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>
    )
  ;

【参考方案1】：

当您将卡片传递给 ProfileCard 组件时，它会在 props 中传递 4 个值。

login: string, name: string, key: number, id: number

但是你的界面只有2个

interface ProfileCardProps 
  login: string; 
  name: string; 

添加 key 和 id 应该可以解决问题。

interface ProfileCardProps 
  login: string; 
  name: string;
  id:any;
  key: any;

【参考方案2】：

这种类型的接口使用要求接口的所有成员都为空

interface ProfileCardProps 
  login: string; 
  name: string;
  id?:number; 

【讨论】：

不是真的，不是这个意思