React typescript, как использовать типы useState и отображать список в tsx

Question

Как мне установить тип useState и отобразить список с картой в React TypeScript?

У меня есть компонент:

export type Item = {
  name: string;
  title: string;
};
export type ItemTypes = {
  item: Item[];
};

export const ItemList: FC = () => {
   const [items, setItems] = useState<ItemsTypes | []>([])

   useEffect(() => {
    let items = [
      {
        name: "A",
        title: "B",
      },
      {
        name: "C",
        title: "D",
      }
    ]
    setItems()
   }, [);

   return (
     <div>
         {items?.map((item) => (
          <>{item.name}</>
         ))}
     </div>
   )
}

И под .map красная линия и надпись:

any
Property 'map' does not exist on type 'ItemTypes | []'. 

Где моя ошибка?

Answer 1

Как определено, ItemTypes - это не массив, а объект, имеющий свойство item, отсюда и ошибка. Вместо этого используйте Item[].

const [items, setItems] = useState<Item[]>([])

Answer 2

В вашей реализации есть несколько ошибок.

Во-первых, если вы хотите export псевдоним типа ItemTypes, вы можете установить псевдоним типа для ItemTypes, как это export type ItemTypes = Item[] .

Во-вторых, вы никогда не вызываете setItems с items, созданным в useEffect.

Наконец, потому что вы пытаетесь получить доступ к свойству name на каждом элемент, который вы должны проверять item.length в условном выражении, иначе будет выдана ошибка cannot access property name of undefined, если вы попытаетесь загрузить элементы асинхронно.

Решение

    export type Item = {
      name: string;
      title: string;
    };

    export type ItemTypes = Item[];

    export const ItemList: FC = () => {
       const [items, setItems] = useState<ItemsTypes | []>([])

       useEffect(() => {
        let items = [
          {
            name: "A",
            title: "B",
          },
          {
            name: "C",
            title: "D",
          }
        ]
        setItems(items)
       }, []);

       return (
         <div>
             {
               items.length && items.map((item) => (<p>{item.name}</p>) )

             }
         </div>
       )
    }