我正在嘗試映射來自 api 的資料，但我從 Typescript 收到錯誤訊息。我嘗試過嵌套Prop型別而不是將它們作為兄弟，并且我嘗試使用空值mvp來查看是否可以找到問題。這是我的代碼：

REST 國家 API

解決方案：

import { Key } from "react";
import Card from "../../components/Card/Card";
import SearchBar from "../../components/SearchBar/SearchBar";
import { HomeWrapper, CountryGrid } from "./Home.styled";

type Props = { data: any, };
type Grid = { region: string, };

function Home( {data}:Props ): JSX.Element {
  return (
    <HomeWrapper>
      <SearchBar />
      <CountryGrid>
        {data.map((entry:Grid, index: Key | null | undefined) => {
          return <Card key={index} image="" country="" region={entry.region} population="" capital="" />
        })};
      </CountryGrid>
    </HomeWrapper>
  )
}

export default Home

問題

import Card from "../../components/Card/Card";
import SearchBar from "../../components/SearchBar/SearchBar";
import { HomeWrapper, CountryGrid } from "./Home.styled";

type Props = { 
  data: any,
  index: string,
  entry: {
    image: string,
    country: string,
    region: string,
    capital: string,
    population: string,
    name: { common: string, };
    flags: { png: string, };
  },
};

function Home( {data}:Props ): JSX.Element {
  return (
    <HomeWrapper>
      <SearchBar />
      <CountryGrid>
        {data.map(({entry, index}:Props) => {
          return (<Card key={index} image={entry.flags.png} country={entry.name.common} region={entry.region} population={entry.population} capital={entry.capital[0]} />)
        })};
      </CountryGrid>
    </HomeWrapper>
  )
}

export default Home

編輯：API呼叫

  // make api call, assign response to data state.
  // hasFetchedData ref ensures double rendering doesn't occur.
  const [apiData, setApiData] = useState([]);
  const hasFetchedData = useRef(false);
  useEffect(() => {
    async function fetchData() {
      try {
        await fetch('https://restcountries.com/v3.1/all')
        .then(response => response.json())
        .then(data => setApiData(data));
      } catch (e) {
        console.error('Error fetching api data', e);
      };
    };
    if (hasFetchedData.current === false) {
      fetchData();
      hasFetchedData.current = true;
    };
  }, []);

uj5u.com熱心網友回復：

import { Key } from "react";
import Card from "../../components/Card/Card";
import SearchBar from "../../components/SearchBar/SearchBar";
import { HomeWrapper, CountryGrid } from "./Home.styled";

// split props
type Props = { data: any, };
type Grid = { region: string, };

function Home( {data}:Props ): JSX.Element {
  return (
    <HomeWrapper>
      <SearchBar />
      <CountryGrid>
        {/* index has unique typescript type */}
        {data.map((entry:Grid, index: Key | null | undefined) => {
          return <Card key={index} image="" country="" region={entry.region} population="" capital="" />
        })};
      </CountryGrid>
    </HomeWrapper>
  )
}

export default Home

uj5u.com熱心網友回復：

首先，宣告一個新型別：

type Country = {
    region: string,
    capital: string[],
    population: number,
    name: { common: string, };
    flags: { png: string, };
    // ... other properties from the API object (no need to declare as you are not using them anywhere)
  }

在這里，我們正在更改我們在<Home />組件中傳遞的道具的型別。

改變

function Home( {data}:Props ): JSX.Element

到

function Home( { data:Country[]} ): JSX.Element

該.map()方法的回呼接受index作為第二個引數。我們將從那里得到它。

改變

data.map(({entry, index}:Props) => 

到

data.map((entry, index)) =>

現在一切都應該正常了。

您基本上是對 Typescript 編譯器說您正在將Props型別傳遞給<Home />組件，但事實并非如此。

您實際上傳遞了一個 API 物件陣列，上面我們宣告該陣列中的每個物件都是型別Country

uj5u.com熱心網友回復：

我之前沒有使用 React 的經驗，但從外觀上看，您似乎將 data 定義為 Props 型別，然后您想通過 Props 進行映射（您不能這樣做，因為它不是 Array）。

嘗試將 Home 函式中的資料定義為 Array，如下所示：Home( {data}: Array<Props> ): JSX.Element

標籤：javascript 反应 打字稿

上一篇：使用Javascript按升序對二維陣列進行排序

下一篇：如何向后查找索引