Typescript 渲染通过 map 错误：堆栈深度比较类型过多

Question

I have a project structured:我有一个项目结构：

export interface Project{
    id: String,
    title: String,
    description: String,
    image?: any,
    languages: String[]
}

and when I try to map over the languages array like:当我尝试通过语言数组进行 map 时，例如：

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>
    )
}

It throws an Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>' error. Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'错误。 What might be the reason for that?这可能是什么原因？

I ran into this issue which tells me to downgrade VSCode's used TS version, but is there any other solution that someone came up with?我遇到了这个问题，它告诉我降级 VSCode 使用的 TS 版本，但是还有其他人想出的解决方案吗？

Answer 1

Apparently, TS version 4.3.0-dev has an issue and I have to change the VSCode's used TS version to the workspace version which is 4.2.3 .显然，TS 版本4.3.0-dev有问题，我必须将 VSCode 使用的 TS 版本更改为workspace版本4.2.3 。 Stumbled upon one or two other ways, but this issue was the only solution that works, unfortunately偶然发现了一两种其他方法，但不幸的是，这个问题是唯一有效的解决方案

Yay, found a different workaround是的，找到了不同的解决方法

      <>
       {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>
          )
       })}
    </>

Apparently, adding fragments resolves the issue for now.显然，添加片段现在解决了这个问题。

Typescript 渲染通过 map 错误：堆栈深度比较类型过多

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-23 18:19:50

Yay, found a different workaround是的，找到了不同的解决方法

Typescript 渲染通过 map 错误：堆栈深度比较类型过多

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-23 18:19:50

Yay, found a different workaround是的，找到了不同的解决方法

解决方案1
1 已采纳 2021-03-23 18:19:50