React受控组件报错TypeError: object is not iterable问题排查

核心错误 #

报错TypeError: object is not iterable的直接原因是你在handleChange函数中错误使用了数组解构处理event.target：

const [name , value , type , checked] = event.target

event.target是一个DOM元素对象，并非可迭代的数组/类数组结构，数组解构仅适用于可迭代对象，因此触发了该错误。

修复代码 #

将数组解构改为对象解构即可解决问题，修改后的handleChange函数如下：

function handleChange(event) {
    // 使用对象解构提取DOM元素的属性
    const { name, value, type, checked } = event.target
    setQuestionForm(prev => {
        return {
            ...prev,
            [name]: type === 'checkbox' ? checked : value
        }
    })
}

额外提示 #

当前你的单选选项中缺少正确答案（伦敦），虽然这不会引发代码报错，但会影响业务逻辑完整性，建议补充对应选项。

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