使用类型脚本MapNextjs中的数组

nkcskrwz  于 2023-03-18  发布在  其他
关注(0)|答案(1)|浏览(58)

我试图用一种简单的方式Map一个数组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>'

这是我的Map组件

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 ",
  },
];

我不知道是什么问题,当我试图直接使用组件而不Map它时,它工作得很好。你猜是什么问题?**

wfveoks0

wfveoks01#

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

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

或删除大括号{...}

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

相关问题