为什么我在导入类型文件时收到参数错误的错误消息答案

【问题标题】：why am I getting an error that the parameters are wrong, when I imported the types file为什么我在导入类型文件时收到参数错误的错误消息
【发布时间】：2022-11-28 11:06:37
【问题描述】：

我在 BoxerCard 中收到打字稿错误 ts(18048)。我导入了类型的文件，但参数似乎没有接受它。我试过在函数的参数中手动添加类型，但它没有改变任何东西。类型应该是类型文件中的类型，但它将它们全部更改为字符串。

在 Types.tsx 中

import React from "react";

export interface BoxerCardInterface {
  name: string;
  imgUrl: any;
  age: number;
  status: string;
}

export interface CoachCardInterface {
  name: string;
  imgUrl: any;
  title: string;
}

在 Boxers.tsx

import React from "react";
import { BoxerCard } from "../components/BoxerCards";
import BoxerData from "../data/BoxerData";
import { BoxerCardInterface } from "../data/Types";


export function Boxers() 
{
    return (
    <div className="flex flex-col md: flex-rows items-center justify-center">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {BoxerData.map(boxers => (
                <BoxerCard
                imgUrl={boxers.imgUrl}
                name={boxers.name}
                age={boxers.age}
                status={boxers.status}
                />
            ))

            }
        </div>

    </div>
    )
}

在 BoxerCard.tsx 中

import React from "react";
import { BoxerCardInterface } from "../data/Types";

export function BoxerCard({name,imgUrl,age,status,}:BoxerCardInterface) {
  return (
    <div className="card w-96 glass m-12">
    <figure><img src="https://placeimg.com/400/225/arch" alt="car!"/>{imgUrl}</figure>
    <div className="card-body">
      <h1 className="card-title flex-col">{name}</h1>
      <div className="card-actions justify-end">
      <button className="btn gap-2">age: {age}</button>     
      <button className="btn gap-2">{status}</button>     
   
      </div>
    </div>
  </div>
  );
};

在 BoxerData.tsx 中

import React from "react";

export default [
    {
    name: 'Natalia Castaneda',
    imgUrl: '',
    age: '19',
    status: 'Open'
   }, 
  , 
   {
    name: 'Joel Sanchez',
    imgUrl: '',
    age: '19 years old',
    status: 'Open'
   }, 
   {
    name: 'Scott Mcfadden',
    imgUrl: '',
    age: '20 years old',
    status: 'Open'
   }, 
   {
    name: 'Augusta Grace',
    imgUrl: '',
    age: '26 years old',
    status: 'Novice'
   }, 
   {
    name: 'Alex Garcia',
    imgUrl: '',
    age: '19 years old',
    status: 'Novice'
   },
   {
    name: 'Mia Andre',
    imgUrl: '',
    age: '13 years old',
    status: 'Novice'
   },
  
    {
    name: 'Jocelyn Castaneda',
    imgUrl: '',
    age: '13 years old',
    status: 'Novice'
   }
   
];

【问题讨论】：

"../data/BoxerData" 文件中有什么？

标签： reactjs typescript card

【解决方案1】：

BoxData.tsx 中的第一个元素之后有额外的 ,。删除它，它将正常工作。

import React from "react";

export default [
  {
    name: "Natalia Castaneda",
    imgUrl: "",
    age: "19",
    status: "Open",
  },
  // here you were having an extra , (comma)
  {
    name: "Joel Sanchez",
    imgUrl: "",
    age: "19 years old",
    status: "Open",
  },
  {
    name: "Scott Mcfadden",
    imgUrl: "",
    age: "20 years old",
    status: "Open",
  },
  {
    name: "Augusta Grace",
    imgUrl: "",
    age: "26 years old",
    status: "Novice",
  },
  {
    name: "Alex Garcia",
    imgUrl: "",
    age: "19 years old",
    status: "Novice",
  },
  {
    name: "Mia Andre",
    imgUrl: "",
    age: "13 years old",
    status: "Novice",
  },

  {
    name: "Jocelyn Castaneda",
    imgUrl: "",
    age: "13 years old",
    status: "Novice",
  },
];

【讨论】：

我已经完成了消除错误行的操作，但参数仍然是字符串。

【解决方案2】：

您的问题来自../data/BoxerData，因为您正在导出Array<{ name: string; imgUrl: string; age: string; status: string; } | undefined> 的类型，这意味着数组中的数据可能未定义。

意味着您的数据正在返回有可能返回[undefined, undefined, ...boxers]

您可以通过过滤然后映射或通过防止 undefined 元素出现在数组内部的可能性来解决此问题。

【讨论】：