NextJS添加"use client"后触发调用栈溢出错误求助

可能的原因及对应解决方案 #

1. 组件因props不稳定导致无限重渲染 #

当ThreadCard转为客户端组件后，若父组件传递的函数、对象或数组类型props每次渲染都会生成新的引用，组件会误认为props发生变化，触发重复渲染；若渲染过程中又触发父组件状态更新，就会形成循环，最终导致调用栈溢出。

解决方法：

• 父组件中用useCallback包裹传递给ThreadCard的事件处理函数，比如点赞回调：

  const handleLike = useCallback((threadId: string) => {
    // 点赞逻辑
  }, []);
  

• 用useMemo缓存传递的对象/数组类型props，避免每次渲染生成新引用：

  const threadData = useMemo(() => ({
    id: thread.id,
    content: thread.content,
    likes: thread.likes
  }), [thread.id, thread.content, thread.likes]);
  

2. useState初始化逻辑触发重复更新 #

如果useState的初始值依赖了每次渲染都会变化的计算逻辑，或者直接调用了会返回新引用的函数，会导致state在每次渲染时都被重置，进而触发无限重渲染。

解决方法：

• 使用函数式初始化，确保初始化逻辑只执行一次：

  // 错误示例：每次渲染都会调用getInitialLikes()
  // const [likes, setLikes] = useState(getInitialLikes());
  
  // 正确示例：初始化函数仅执行一次
  const [likes, setLikes] = useState(() => getInitialLikes());
  

• 若初始值依赖父组件props，改用useEffect监听props变化来更新本地状态：

  const [likes, setLikes] = useState(0);
  
  useEffect(() => {
    setLikes(props.initialLikes);
  }, [props.initialLikes]);
  

3. 递归或循环更新state #

在useEffect或事件处理函数中，若没有正确设置依赖项，或者setState的回调逻辑触发了新一轮的state更新，会形成循环更新，耗尽调用栈。

解决方法：

• 检查useEffect的依赖数组，确保仅在必要时执行更新：

  useEffect(() => {
    // 仅当threadId变化时重新获取点赞数
    fetchLikes(threadId).then(res => setLikes(res));
  }, [threadId]); // 不要遗漏关键依赖，也不要用空数组导致无法更新
  

• 避免在setState的回调中触发其他会导致当前state更新的逻辑，比如不要在点赞的setLikes回调里又调用修改同一state的函数。

4. 组件自身递归渲染 #

检查ThreadCard的JSX结构，是否存在直接或间接渲染自身的情况（比如不小心在组件内部又返回了<ThreadCard />），这种递归调用会瞬间耗尽调用栈。

解决方法：

• 遍历组件的渲染逻辑，移除意外的自引用，确保组件仅在正确的上下文（如列表循环）中被渲染。

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