Next.js 14出现Maximum call stack size exceeded错误求助

你的代码存在几个明显错误，直接导致了"Maximum call stack size exceeded"异常，以下是问题分析和修复方案：

问题定位 #

1. map循环未返回JSX元素：CategoryList组件中，props.list.map的回调函数没有返回<h2>元素，导致渲染结果是全为undefined的数组，React处理该异常时可能触发栈溢出。
2. 组件导出错误：定义的组件是CategoryList，但导出语句写的是export default Candidates;，这会导致page.js中引入的组件完全错误，引发循环渲染或引用异常。
3. 潜在的数据循环引用风险：如果category对象内部存在循环引用（比如自身引用或嵌套引用），setSelectedCategory(category)时会触发React的无限更新逻辑，也会导致栈溢出。

修复后的代码 #

/components/CategoryList.js #

'use client'

import { useState } from 'react'

const CategoryList = (props) => {
  
  const [selectedCategory, setSelectedCategory] = useState(null) // 初始值设为null更符合未选择状态
 
  return (
     <div>
      {props.list.map((category, index) => (
        <h2 
          key={category.id || index} // 添加唯一key，避免React渲染警告
          onClick={() => setSelectedCategory(category)}
        >
          {category.name}
        </h2>
      ))}
    </div>
);
};

export default CategoryList;

修复说明 #

• 补全map返回值：改用括号包裹的隐式返回语法，确保每个循环项返回正确的JSX元素，避免渲染异常。
• 修正导出语句：将错误的export default Candidates;改为export default CategoryList;，保证组件引用正确。
• 添加key属性：给列表项添加唯一标识，符合React列表渲染规范，避免潜在的性能问题和警告。
• 优化初始状态：将useState初始值从{}改为null，更贴合未选择分类的业务逻辑。

额外检查 #

如果修复后仍出现栈溢出，需要排查API返回的all_categories.data数据结构：确保数组中的category对象没有循环引用（比如对象属性引用自身），若存在此类情况，需在API层处理数据，移除循环引用后再传递给客户端组件。

内容的提问来源于stack exchange，提问作者zaid shaikh