React（Next.js）获取表单输入值报错：useState为null的类型错误

错误原因及对应修复步骤 #

1. 显式导入React与useState Hook #

useState 是React提供的Hook，必须确保在组件文件顶部正确导入：

import React, { useState } from 'react';

即使React 17+支持自动导入，部分Next.js配置场景下仍需显式声明，否则会出现useState无法读取的错误。

2. 修正JSX绑定语法错误 #

你的代码里错误地用引号包裹了事件处理函数和state值，React会将其识别为字符串而非JS表达式，必须去掉引号：

<form onSubmit={check_login}>
  <div className="form-group">
    <label>Username or email *</label>
    <input
      type="text"
      name="email"
      className="form-control p_input"
      onChange={handleEmail}
      value={state.email}
    />
  </div>

  <div className="text-center">
    <button
      type="submit"
      className="btn btn-primary btn-block enter-btn"
    >Login</button>
  </div>
</form>

3. 确保代码在函数组件内执行 #

useState Hook仅能在函数组件或自定义Hook中调用，不能在类组件、普通函数或组件外部使用。正确的组件结构示例：

import React, { useState } from 'react';

const LoginForm = () => {
  const [state, setState] = useState({ email: "", password: "" });

  const handleEmail = (e: any) => {
    const { name, value } = e.target;
    setState({
      ...state,
      [name]: value,
    });
  };

  const check_login = (e: any) => {
    e.preventDefault();
    alert("email is " + state.email);
  };

  return (
    // 上述修正后的表单代码
  );
};

export default LoginForm;

4. 可选：优化状态更新逻辑（避免依赖问题） #

如果后续遇到state更新不及时的情况，可改用函数式更新确保获取最新state：

const handleEmail = (e: any) => {
  const { name, value } = e.target;
  setState(prevState => ({
    ...prevState,
    [name]: value,
  }));
};

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