React登录表单编译报错：'userName'和'pwd'未定义（no-undef）

错误原因分析 #

你遇到的'userName' is not defined和'pwd' is not defined编译错误，核心问题是你在代码中直接使用了这两个变量，但没有在组件的state中声明，也没有通过正确的方式引入它们。React中处理表单输入时，我们通常用「受控组件」的方式，把输入值维护在组件的state里，这样就能避免未定义的变量错误。

修正后的完整代码示例 #

import React, { Component } from 'react';
import './Login.css';

class Login extends Component {
  // 初始化state，添加表单字段和API返回数据的存储
  state = {
    userName: '',
    pwd: '',
    data: []
  };

  // 处理表单输入变化，更新state
  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  // 处理表单提交
  handleSubmit = (e) => {
    e.preventDefault();
    const { userName, pwd } = this.state;

    // 密码验证：这里可以根据需求调整，比如检查是否为空
    if (!pwd.trim()) {
      alert('密码不能为空！');
      return;
    }

    // 对接API的请求逻辑
    fetch('https://api.myjson.com/bins/11unjr', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userName: userName,
        password: pwd
      })
    })
    .then(response => response.json())
    .then(data => {
      console.log('登录请求结果:', data);
      this.setState({ data: data });
      // 这里可以添加登录成功后的逻辑，比如跳转页面
    })
    .catch(error => {
      console.error('登录请求失败:', error);
      // 处理请求失败的情况，比如提示用户
    });
  };

  render() {
    const { userName, pwd } = this.state;
    return (
      <div className="Login">
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>用户名：</label>
            <input
              type="text"
              name="userName"
              value={userName}
              onChange={this.handleChange}
              placeholder="请输入用户名"
            />
          </div>
          <div>
            <label>密码：</label>
            <input
              type="password"
              name="pwd"
              value={pwd}
              onChange={this.handleChange}
              placeholder="请输入密码"
            />
          </div>
          <button type="submit">登录</button>
        </form>
      </div>
    );
  }
}

export default Login;

关键修改点说明 #

• 初始化state：在state中添加了userName和pwd字段，用来存储表单输入的用户名和密码，直接解决了变量未定义的编译错误。
• 受控组件绑定：每个输入框都绑定了value（关联state中的对应字段）和onChange（触发handleChange更新state），实现了输入值和state的双向同步，确保表单数据能被正确捕获。
• 表单提交处理：
  • 用e.preventDefault()阻止表单默认提交行为，避免页面刷新；
  • 添加了密码非空验证（你可以根据需求改成更复杂的规则，比如长度限制、正则匹配等）；
  • 完善了fetch请求的headers（指定Content-Type为application/json）和body（把表单数据转成JSON格式发送），确保请求能正确对接目标API。
• 错误处理：添加了fetch请求的catch块，用来处理网络请求失败的情况，方便排查问题。

额外优化建议 #

• 如果你的项目支持React Hooks，可以把类组件改成函数组件+useState/useEffect，代码会更简洁；
• 可以添加加载状态（比如登录按钮置灰、显示loading图标），提升用户体验；
• 密码验证逻辑可以抽成单独的函数，让代码结构更清晰。

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