React联系页输入框无法输入，报Uncaught TypeError错误的解决方案

控制台的报错Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) at handleInput明确指向handleInput函数中尝试遍历一个非可迭代对象（比如普通JS对象），而JS默认只能遍历数组、字符串、Map、Set这类实现了迭代器接口的类型。结合输入框无法输入的症状，大概率是在更新表单状态时错误地把对象当成数组处理了。

常见错误场景及修复方案 #

场景1：更新对象类型的表单状态时误用数组扩展

如果你的表单状态是一个对象（比如const [formData, setFormData] = useState({ email: '', phone: '', message: '' })），但在handleInput中用了数组的扩展语法：

// 错误写法
const handleInput = (e) => {
  const { name, value } = e.target;
  setFormData([...formData, { [name]: value }]); // 试图扩展对象成数组，触发报错
};

修复：改用对象扩展语法更新状态：

// 正确写法
const handleInput = (e) => {
  const { name, value } = e.target;
  setFormData({ ...formData, [name]: value });
};

场景2：遍历表单对象时直接用for...of

如果在handleInput或相关逻辑中直接遍历对象：

// 错误写法
for (const field of formData) { // formData是对象，无法被for...of遍历
  // 处理字段逻辑
}

修复：用Object.entries/Object.values将对象转为可迭代的键值对数组：

// 正确写法
for (const [key, value] of Object.entries(formData)) {
  // 处理字段逻辑
}

场景3：解构赋值时误将对象当成数组

如果在函数中尝试解构对象为数组：

// 错误写法
const [email, phone] = formData; // formData是对象，无法数组解构

修复：改用对象解构：

// 正确写法
const { email, phone } = formData;

验证步骤 #

1. 打开浏览器开发者工具，定位到handleInput函数的具体报错行。
2. 检查该行代码中被遍历/解构的变量类型，确认是否为非可迭代对象。
3. 根据上述场景调整代码，确保对对象和数组的操作匹配其类型。

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