javascript - Typescript 通过地图错误渲染:堆栈深度比较类型过多
问题描述
我有一个项目结构:
export interface Project{
id: String,
title: String,
description: String,
image?: any,
languages: String[]
}
当我尝试映射语言数组时,例如:
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import Head from 'next/head'
import Image from 'next/image'
import { multipleProjects } from '../../test/projects'
import { Project as ProjectType } from '../../assets/types/types'
export default function Project() {
const router = useRouter()
const { id } = router.query
const [project, setProject] = useState<ProjectType>(null)
useEffect(() => {
const _project = multipleProjects.find(p => p.id === id)
if (_project) setProject(_project)
}, [])
if (!project) return "No project"
return (
<div className="h-screen def-background pt-16">
<Head>
<title>Project: </title>
</Head>
<div className="flex w-8/12 mx-auto mb-auto mt-24 flex-col justify-center items-center text-gray-200 font-mono">
<p className="text-center text-3xl font-bold tracking-wide text-gray-300 mx-4 p-2">{project.title}</p>
<div className="w-full h-72 relative m-8 p-4">
<Image
src={project.image}
alt={`Picture of the ${project.title}`}
layout='fill'
/>
</div>
<div className="w-full mx-12 p-4 text-left text-indent flex-grow">
{project.description}
</div>
{project.languages?.map((language, index) => {
return (
<div key={index} className="self-end flex gap-2 italic mr-8 mt-12 p-2 text-gray-600 text-sm">
{language}
</div>
)
})}
</div>
</div>
)
}
它抛出一个Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'
错误。这可能是什么原因?
我遇到了这个问题,它告诉我降级 VSCode 使用的 TS 版本,但是还有其他人想出的解决方案吗?
解决方案
显然,TS 版本4.3.0-dev
有问题,我必须将 VSCode 使用的 TS 版本更改workspace
为4.2.3
. 偶然发现了一两种其他方法,但不幸的是,这个问题是唯一有效的解决方案
是的,找到了不同的解决方法
<>
{project.languages?.map((language, index) => {
return (
<div key={index} className="self-end flex gap-2 italic mr-8 mt-12 p-2 text-gray-600 text-sm">
{language}
</div>
)
})}
</>
显然,添加片段现在解决了这个问题。
推荐阅读
- ssl-certificate - 在 OKD 中连接到 docker 注册表的 TLS 握手问题
- python - 无法在 Python 中执行 SQL HANA 查询 - 语法错误
- typescript - React Native 无法从文件中解析模块
- python - Django rest 框架 - 使用 2 种不同类型的序列化程序的多对一关系?
- javascript - javascript验证密码中的随机字符,如“a1a,aKa,a$a,aJ^lG,G78%s#
- javascript - 如何避免 Jquery 标签输入无法读取未定义错误的属性“拆分”
- c# - EntityFramework 在发送的查询中不包含 where 子句
- android - 如何滚动到谷歌地图中的位置并点击它
- javascript - 仅使用 SPAN 标记将可能以特殊字符开头或结尾且具有公共前缀的搜索短语包装为整个单词
- apache-kafka - 水槽:为分区 kafka sink 分配密钥