时间戳

首页 > 解决方案 > React JS 为传递给映射函数 array.map(item:???) 的数组创建接口

reactjs - React JS 为传递给映射函数 array.map(item:???) 的数组创建接口

问题描述

有人告诉我为我的 .map 代码创建一个接口，但我不确定我该怎么做，我一直在寻找一段时间，但找不到任何我用### 隔离代码的示例。任何帮助，将不胜感激。

我有更新界面部分但仍然遇到问题

interface ItemCategories{
  id: number;
  name: string;
  categoryImg: string;
}

import React, { FC, useState, useEffect } from "react";
import CategoryButton from "./CategoryButton";
import axios from "axios";
import "../assets/stylesheets/CategoryList.css";

const CategoryList: FC = () => {
  const [itemCategories, setItemCategories]: ItemCategories[] = useState([]);
  const categorySelection = (categoryType: string) => {
    console.log(categoryType);
  };

  useEffect(() => {
    const updateData = async () => {
      const results = await axios.request({
        method: "get",
        url: "http://localhost:3000/categories",
      });
      setItemCategories(results.data);
    };
    updateData();
  },[]);

  return (
    <div className="cs-hs-scroll-div">
      <div className="cs-category-selection  w-100">
        {itemCategories.length > 0 ? (
          itemCategories.map((itemCategory: ItemCategories) => (

              <CategoryButton
                key={itemCategory.id.toString()}
                textData={itemCategory.name}
                id={itemCategory.id}
                categoryImgUrl={itemCategory.categoryImg}
                onBtnClick={categorySelection}
              />

          ))
        ) : (
          <div />
        )}
      </div>
    </div>
  );
};

export default CategoryList;

标签： reactjstypescript

解决方案

你需要像下面这样的东西；

interface ItemCategory {
    id: string;
    name: string;
    categoryImg: string;
}

代码中的下一行；

const [itemCategories, setItemCategories]: any[] = useState([]);

您需要将 any 的类型数组更改为 ItemCategory 的数组。像这样;

const [itemCategories, setItemCategories]: ItemCategory[] = useState([]);

地图中单个项目的类型可以更改为；

itemCategory: ItemCategory

推荐阅读