react和typescript -从获取的数据映射对象数组

interface Item {
  id: number;
  name: string;
  // 其他属性...
}

const items: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  // 其他项...
];

import React, { useEffect, useState } from 'react';

interface Item {
  id: number;
  name: string;
}

const fetchData = async (): Promise<Item[]> => {
  // 模拟从 API 获取数据
  const response = await fetch('https://api.example.com/items');
  const data: Item[] = await response.json();
  return data;
};

const ItemList: React.FC = () => {
  const [items, setItems] = useState<Item[]>([]);

  useEffect(() => {
    fetchData().then(data => setItems(data));
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ItemList;

const fetchData = async (): Promise<Item[]> => {
  try {
    const response = await fetch('https://api.example.com/items');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data: Item[] = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
};

interface Item {
  id: number;
  name: string;
  // 确保所有属性都定义了类型
}

const items: Item[] = [
  { id: 1, name: 'Item 1' },
  // 确保所有项都符合 Item 接口
];