在物件Typescript/React中映射陣列-有解無憂

我是打字稿和 React 的新手。專案的想法是從我創建的 JSon 檔案中獲取一些資訊（背面）并將它們顯示在卡片上（正面）。

我嘗試從cards?.items.map唯一的道具中傳遞道具，我不知道從中獲取資訊的正確方法是什么cards.items（cards.items 在檔案中宣告cards.decl.ts）

card.decl.ts ：

export type ICards = {
  title: string;
  items: ICardItems;
  urlSuffixe: string;
};

export type ICardItem = {
  id: number;
  img: string;
  gender: string;
  name: string;
};

export type ICardItems = ICardItem[];

主頁.tsx :

import React, { useState, useEffect } from "react";
import axios from "axios";
import Cards from "../Cards/Cards";
import { ICardItems, ICards } from "../../decl";
import { getCards } from "../../api";
import "./Home.css";

interface AppState {
  cards: ICards | undefined;
}

const Home = () => {
  const [appCards, setAppCards] = useState<AppState>();

  const fetchCards = async () => {
    const cardsPages = await getCards();
    setAppCards({ cards: cardsPages });
  };
  console.log(appCards);

  useEffect(() => {
    fetchCards();
  }, []);

  return (
    <div className="home">
      <Cards cards={appCards} />
    </div>
  );
};

export default Home;

卡片.tsx

import React, { FC, useState } from "react";
import ListCard from "../ListCard/ListCard";
import { getCards } from "../../api/index";
import { ICardItems, ICards } from "../../decl";
import "./Cards.css";

export interface CardsProps {
  cards: ICards | undefined;
}

const Cards = ({ cards }: CardsProps) => {
  return (
    <section className="section cards">
      <div className="cards__wrap container">
        <div className="section__title">
          <h1>{cards?.title}</h1>
        </div>
        {cards?.items.map((card: ICardItem) => {
         <ListCard
          key={card.id}
          id={card.id}
          img={card.img}
          gender={card.gender}
          name={card.name}
         />;
    })}
      </div>
    </section>
  );
};

export default Cards;

ListCard.tsx

import React, { FC, useState } from "react";
import { useGlobalContext } from "../../context";
import { ICardItems, ICards } from "../../decl";
import "./ListCard.css";

export interface CardsProps {
  cards: ICards | undefined;
}
const ListCard: React.FC<CardsProps> = () => {

uj5u.com熱心網友回復：

我不是很清楚你在這里問的是什么，但我確實看到你的 map 函式有問題——它沒有回傳任何東西！

改變

{cards?.items.map((card: ICardItem) => {
         <ListCard
          key={card.id}
          id={card.id}
          img={card.img}
          gender={card.gender}
          name={card.name}
         />;
    })}

到

{cards?.items.map((card: ICardItem) => {
         return <ListCard
          key={card.id}
          id={card.id}
          img={card.img}
          gender={card.gender}
          name={card.name}
         />;
    })}

您可能對箭頭函式語法感到困惑，它看起來像

{cards?.items.map((card: ICardItem) => <ListCard key={card.id} id={card.id} img={card.img} gender={card.gender} name={card.name}/>)}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373505.html

標籤：反应打字稿

上一篇：Typescript React：使用propsAND(!)解構

下一篇：更改asp.netcore3.1中的默認登錄路徑