Next.js最新版本中State未更新，请求排查问题

架构老林

2026-7-8

问题分析与修复

核心问题：组件名称不符合React规范

React要求组件名称必须首字母大写，你的代码中组件名是小写的page，会被React识别为原生HTML标签而非React组件，导致useState、useEffect等Hooks无法正常工作，进而出现状态不更新的问题。

额外优化：无需使用`useEffect`维护`disable`状态

disable状态完全可以通过username和email的长度直接计算，不需要借助useEffect，这样能减少不必要的状态更新逻辑，代码更简洁可靠。

修复后的完整代码

"use client";
import { useState } from "react";

// 组件名首字母大写
function Page() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");

  // 直接计算disable状态，无需useEffect
  const disable = username.length === 0 || email.length === 0;

  const handleSubmit = () => {
    // 这里添加提交逻辑
  };

  return (
    <>
      <label htmlFor="name">Name</label>
      <hr />
      <input
        type="text"
        name="name"
        value={username}
        className="text-black"
        onChange={(e) => setUsername(e.target.value)}
      />
      <hr />
      <label htmlFor="email">Email</label>
      <hr />
      <input
        type="text"
        name="email"
        value={email}
        className="text-black"
        onChange={(e) => setEmail(e.target.value)}
      />
      <hr />
      <button onClick={handleSubmit} disabled={disable}>Submit</button>
    </>
  );
}

export default Page;