我试图用一种简单的方式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它时,它工作得很好。你猜是什么问题?**
1条答案
按热度按时间wfveoks01#
您返回的是
array<void>
而不是array<FC<iFolder>>
。您可以添加return
:或删除大括号
{...}
: