键入“{ key: number；item: string；}”不能分配到键入“IntrinsicAttributes”

Question

我是TypeScript的新手，试图通过ExerciseTypes组件中的道具传递项目，但得到的错误类型'{ key: number；item: string；}‘不能分配到键入'IntrinsicAttributes’。拜托，我做错什么了？

这是我的密码

import axios from "axios";
import { Box } from "@mui/system";
import useSWR from "swr";
import ExerciseTypes from "./ExerciseTypes";

const SearchExercise: React.FC = () => {
  const options = {
    method: "GET",
    url: "https://exercisedb.p.rapidapi.com/exercises/bodyPartList",
    headers: {
      "X-RapidAPI-Key": process.env.NEXT_PUBLIC_RAPID_API_KEY,
      "X-RapidAPI-Host": "exercisedb.p.rapidapi.com",
    },
  };

  const fetcher = (options: any) =>
    axios.request(options).then((res) => res.data);

  const { data, error } = useSWR<string[] | undefined>(options, fetcher);

  return (
    <section className="md:mt-10">
      <div className=" px-6 mt-10 border-4 hide space-x-4 w-inherit">
        {data &&
          data.map((item, index) => <ExerciseTypes key={index} item={item} />)}
      </div>
    </section>
  );
};

export default SearchExercise;

const ExerciseTypes:React.FC = () => {
  return (
    <section>
       Exercise type
    </section>
  )
}

export default ExerciseTypes

Answer 1

因此，错误的基本意思是，您试图将item作为道具传递给ExerciseTypes组件，但它没有将item作为支柱。因此，要解决这个问题，您只需要告诉类型系统这个组件有一个支柱。

const ExerciseTypes: React.FC<{ item: string }> = (props) => {
  return (
    <section>
       Exercise type
    </section>
  )
}

这基本上是说

这个组件有一个输入。string

• 输入名为item，类型为item。

另一个选项是删除item支柱，因为组件没有使用它。所以更新

<ExerciseTypes key={index} item={item} />

至

<ExerciseTypes key={index} />