为什么这个 JSX 会导致“堆栈深度过大”错误？答案

【问题标题】：Why does this JSX cause an "excessive stack depth" error?为什么这个 JSX 会导致“堆栈深度过大”错误？
【发布时间】：2021-06-13 03:51:45
【问题描述】：

我正在使用 Next.js 内置的 TypeScript (4.2.3) 支持来编译以下 React 组件。

const Component = (): JSX.Element => {
  const categories = ['Fruit', 'Vegetables'];

  return (
    <ul>
      <li>All</li>
      {categories.map((category) => (
        <li key={category}>{category}</li>
      ))}
    </ul>
  );
};

export default Component;

categories.map(...) 在 VSCode 中带有下划线，并出现以下 TypeScript 错误：

比较类型 'FlatArray' 和 'FlatArray' 的堆栈深度过大。 ts(2321)

如果我删除第一个列表项，错误就会消失：

const Component = (): JSX.Element => {
  const categories = ['Fruit', 'Vegetables'];

  return (
    <ul>
      {categories.map((category) => (
        <li key={category}>{category}</li>
      ))}
    </ul>
  );
};

export default Component;

请有人帮我理解为什么会发生这个错误？还是bug？

【问题讨论】：

这能解决您的问题吗？ github.com/microsoft/TypeScript/issues/43249
@RohitKashyap 是的，谢谢！这似乎是 TypeScript 4.3.0-dev 的错误。

标签： reactjs typescript next.js jsx tsx

【解决方案1】：

正如 GitHub 问题 @RohitKashyap 链接 (https://github.com/microsoft/TypeScript/issues/43249) 中所指出的，这似乎是 TypeScript 4.3.0-dev 的错误。

现在我已经恢复到 4.2.3 来解决这个问题。

【讨论】：