React导入useFormState报错：该方法在react-dom中未找到

1. 检查React及ReactDOM版本 #

useFormState 是React 18.2.0及更高版本才引入的API，版本低于这个就会出现找不到导出的错误。

• 查看当前版本：在项目根目录执行命令

npm list react react-dom

• 升级到最新稳定版：

npm install react@latest react-dom@latest

2. 修正组件代码中的错误 #

你的代码还有几处不符合useFormState的正确用法，一起修正：

错误点说明 #

• Login组件的参数格式错误：组件第一个参数是props对象，不是单独的input和login
• useFormState的返回值是数组，而非{state, form}结构
• form元素未正确绑定useFormState返回的表单属性

修正后的代码 #

import { useState } from "react";
import { useFormState } from "react-dom";
import "./App.css";

// 登录处理的action函数，接收当前状态和表单数据
async function loginAction(prevState, formData) {
  const email = formData.get('email');
  const password = formData.get('password');
  // 这里编写实际登录逻辑，比如请求后端接口
  try {
    // 假设登录成功，返回用户信息
    return { success: true, user: { email } };
  } catch (err) {
    return { success: false, error: '登录失败，请检查账号密码' };
  }
}

function Login() {
  // useFormState返回数组：[当前状态, 表单绑定对象]
  const [state, form] = useFormState(loginAction, { success: null, error: null });

  return (
    <div className="login-wrapper">
      <h1>Login</h1>
      {/* 显示错误或成功提示 */}
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.success && <p style={{ color: 'green' }}>登录成功！</p>}
      <div className="form-wrapper">
        {/* 将form对象绑定到表单元素 */}
        <form {...form}>
          <input type="text" className="input-field" name="email" required />
          <input type="password" className="input-field" name="password" required />
          <button type="submit" className="login-button">Login</button>
        </form>
      </div>
    </div>
  )
}

export default Login;

3. 确认环境配置 #

确保项目使用React 18+的渲染方式，比如在main.jsx（或index.jsx）中：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Login from './Login';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Login />
  </React.StrictMode>,
);

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