reactjs - 使用 TypeScript 在 Nextjs 中映射数组

Question

我正在尝试以简单的方式映射数组 oj 对象

const Folders: FC = () => {
  return (
    <section className="body-center shadow-md rounded-sm flex py-4 gap-[14px] flex-wrap my-5 relative z-[1] bg-gradien-catalog">
    <div>
       {itemCatalog.map((item)=>{
        <SmallFolder name={item.name}/>
      })}
    </div>
     
 
    </section>
  );
};

export default Folders

但是我遇到了错误，我不知道问题是什么

Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1376, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

这是我的映射组件

interface iFolder{
  name: string
}

const SmallFolder: FC<iFolder> = ({name}) => {
  return (
    <Link
      href="/catalog"
      className="folder-container-style group grow-0 shrink flex-[278px]"
      style={{
        backgroundImage: `url("https://img.freepik.com/free-photo/flat-lay-health-still-life-arrangement-with-copy-space_23-2148854064.jpg?w=2000")`,
      }}
    >
      <p className="folder-title">{name}</p>
  
      <figcaption
        className="absolute left-0 bottom-0 flex items-end justify-center pb-5 bg-[#16406a6b] h-[40%] w-full translate-y-full
                             group-hover:translate-y-0 transition-transform"
      ></figcaption>
    </Link>
  );
};

export default SmallFolder;

我尝试在 div 之外添加 React 片段

   <>
       {itemCatalog.map((item)=>{
        <SmallFolder name={item.name}/>
      })}
    </>

错误消失了，但页面上没有任何更改。

这是我的数据

import { TypesItem } from "@/Types/common-types";

export const itemCatalog: TypesItem[] = [
  {
    name: "Ортопедия",
    link: "orthopedics",
  },
  {
    name: "Аппликаторы и массажные коврики",
    link: "matsAndAplicators ",
  },
  {
    name: "Расспродажа",
    link: "sales ",
  },
];

我不知道问题是什么，当我尝试直接使用组件而不映射它时，它工作得很好。 猜猜问题是什么？**

Answer 1

您返回的是 array<void>而不是array<FC<iFolder>> 。您可以添加 return :

{itemCatalog.map((item)=> {
  return <SmallFolder name={item.name} />
})}

或删除大括号 {...} :

{itemCatalog.map((item)=> (<SmallFolder name={item.name} />)}