React JS中按输入名称使用错误状态变量及解决读取报错

错误原因 #

你遇到的Cannot read properties of undefined错误，核心问题有两个：

1. errorValue初始状态可能是undefined或未正确初始化为对象，导致访问属性时直接报错；
2. 访问动态属性时误用了点语法（errorValue.input.name），正确的动态属性访问应该用方括号errorValue[input.name]。

解决方案步骤 #

• 初始化错误状态为空对象
  确保errorValue一开始就是对象类型，避免访问属性时报错：

  const [errorValue, setErrorValue] = useState({});
  

• 用方括号访问动态错误属性
  因为input.name是动态变量，必须用方括号语法访问对应的错误属性，同时可以用可选链或条件渲染避免undefined导致的渲染问题：

  // 可选链方式（推荐）
  {errorValue[input.name]?.message}
  
  // 条件渲染方式
  {errorValue[input.name] && <span className="error-text">{errorValue[input.name]}</span>}
  

• 正确更新错误状态
  设置错误时，要基于原有状态进行扩展，用方括号将动态变量作为属性名：

  // 示例：验证失败时设置对应输入的错误
  setErrorValue(prevErrors => ({
    ...prevErrors,
    [input.name]: "请填写此字段"
  }));
  

完整示例代码 #

import { useState } from 'react';

function App() {
  const [formData, setFormData] = useState({ username: '', email: '' });
  const [errorValue, setErrorValue] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // 输入时清除对应字段的错误
    if (errorValue[name]) {
      setErrorValue(prev => ({ ...prev, [name]: '' }));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};
    
    if (!formData.username.trim()) {
      newErrors.username = "用户名不能为空";
    }
    if (!formData.email.includes('@')) {
      newErrors.email = "请输入有效的邮箱地址";
    }

    if (Object.keys(newErrors).length > 0) {
      setErrorValue(newErrors);
      return;
    }

    // 这里写表单提交逻辑
    console.log("表单提交成功", formData);
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px' }}>
      <div style={{ marginBottom: '15px' }}>
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
          style={{ marginLeft: '8px' }}
        />
        {errorValue.username && <p style={{ color: 'red', margin: '5px 0 0 65px' }}>{errorValue.username}</p>}
      </div>
      <div style={{ marginBottom: '15px' }}>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          style={{ marginLeft: '22px' }}
        />
        {errorValue.email && <p style={{ color: 'red', margin: '5px 0 0 65px' }}>{errorValue.email}</p>}
      </div>
      <button type="submit">提交表单</button>
    </form>
  );
}

export default App;

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