如何在组件中分配 SetState function？ （NextJS 和打字稿）

Question

我正在学习 TypeScript 并且我坚持为我传递给组件的setState的正确分配。

/index.tsx

import { Dispatch, SetStateAction, useState } from "react";
import FetchPokeAPI from "./api/FetchPokeAPI";
import Header from "./components/Header";
import ItemList from "./components/ItemList";

export interface IAllItems {
  name: string;
  url: string;
} [];

export default function Home() {

  const [allItems, setAllItems] = useState<IAllItems[]>([]);

  FetchPokeAPI(setAllItems);

  return (
    <>
      <Header />
      <ItemList items={allItems} />
    </>
  )
}

/FetchPokeAPI.tsx

import { Dispatch, SetStateAction, useEffect } from "react";
import { IAllItems } from "./../index";

interface IProps {
    setAllItems: Dispatch<SetStateAction<IAllItems[]>>;
    allItems: IAllItems[];
}

export default function FetchPokeAPI({setAllItems}:IProps) {
  const pokeapiURL:string = "https://pokeapi.co/api/v2/item/";

  useEffect(() => {
    fetch(pokeapiURL)
      .then((response) => response.json())
      .then((data) => {
        setAllItems(data.results);
      })
      .catch((error) => console.error(error));
  }, [pokeapiURL]);
}

我收到此消息：“Dispatch<SetStateAction<IAllItems[]>>”类型的参数不可分配给“IProps”类型的参数。

提前致谢：）

其他论坛帖子对我有所帮助，但现在我无法再进一步了。

Answer 1

因为接口 IProps 包含 2 个元素：setAllItems: Dispatch<SetStateAction<IAllItems[]>> & allItems: IAllItems[]; 并且您只将它分配给 setAllItems，因为您没有将第二个元素 allItems 放在道具中，您只将它放在类型接口中

export default function FetchPokeAPI({setAllItems}:IProps) {...

所以 typescript 看到 2 种不同的类型，类型 IProps 这是

{
    setAllItems: Dispatch<SetStateAction<IAllItems[]>>;
    allItems: IAllItems[];
}

和当前道具的类型是

{
    setAllItems: Dispatch<SetStateAction<IAllItems[]>>;
}

所以，你需要把 allItems 放在你的道具中

export default function FetchPokeAPI({setAllItems, allItems}:IProps) {...

你得到一个正确的类型分配