Next.js 13中React.useState非函数/不可迭代错误求助

核心原因 #

你的错误来自两个关键点：

1. Next.js 13 App Router组件环境限制：App Router下的组件默认是Server Components，这类组件无法使用useState、useEffect等客户端React Hook。你的useTypedText自定义Hook依赖这些客户端API，在Server Component中调用会直接抛出错误。
2. useEffect无限循环：你的useEffect未设置依赖数组，组件每次渲染都会重新创建定时器，引发无限循环渲染，进一步放大状态更新异常。

解决步骤 #

1. 标记相关组件为客户端组件 #

在所有使用客户端Hook（或调用依赖客户端Hook的自定义Hook）的文件顶部添加'use client'指令，强制组件在客户端运行：

修改后的typingtext.tsx

'use client';
import { useState, useEffect } from "react";

export function useTypedText(text: string, speed: number, delayTime?: number) {
  const [textState, setTextState] = useState("");
  const chars = text.split("");

  // 输入文本变化时重置打字状态
  useEffect(() => {
    setTextState("");
  }, [text]);

  useEffect(() => {
    let interval = speed;
    if (textState.length === 0 && delayTime) {
      interval = speed + delayTime;
    }

    const timer = setTimeout(() => {
      setTextState((prevText) => {
        if (prevText.length !== chars.length) {
          return prevText.concat(chars[prevText.length]);
        }
        return prevText;
      });
    }, interval);

    return () => clearTimeout(timer);
  }, [textState, chars, speed, delayTime]); // 添加完整依赖项避免无限循环

  return textState;
}

修改后的mainheader.tsx

'use client';
import { useTypedText }  from '../typingtext';

export function VMainHeader() {
  return (
    <div>
      <h1>
        {useTypedText("Hello everyone!", 50)}
        <br/>
        {useTypedText("I'm Diego.", 50, 200)}
      </h1>
      <h2>
        {useTypedText("Welcome", 30, 350)}
      </h2>
    </div>
  )
}

2. 修复useEffect依赖问题 #

在useTypedText的useEffect中添加完整的依赖数组，确保只有相关变量变化时才重新执行定时器逻辑，避免无限循环。同时新增监听text变化的useEffect，当输入文本改变时重置状态，保证打字动画重新触发。

额外说明 #

• home.tsx无需添加'use client'，因为它仅渲染客户端组件，自身未使用任何客户端Hook。
• 你之前修改React导入方式无效，是因为问题根源不是导入语法，而是组件的运行环境（Server vs Client）。

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