React提交表单报错contacts is not iterable如何排查解决

报错Uncaught TypeError: contacts is not iterable由两处代码错误导致：

• 函数组件接收props的写法错误：React给函数组件传递属性时，会把所有属性打包成一个对象作为组件函数的第一个参数传入，不会按属性顺序拆成多个位置参数。你写的function Form(addContact,contacts)里，addContact实际拿到的是整个props对象{addContact: setContacts, contacts: []}，第二个参数contacts拿到的是undefined，执行[...contacts, form]时尝试展开undefined，自然会抛出不可迭代的错误。
• 表单校验字段名写错：你定义的表单状态字段、输入框name属性都是fullName，但校验逻辑里写的是form.name，就算props问题修复，校验逻辑也会永远判定姓名为空，无法正常添加联系人。

1. 修改Form组件的参数接收方式，直接从props对象里解构出需要的addContact和contacts属性
2. 把校验逻辑里的form.name改成form.fullName，和实际字段名对齐

import React from "react"
import { useState } from "react"

// 修正：从props对象解构需要的属性
function Form({addContact,contacts}){
    
    const [form,setForm] = useState({fullName : "" , phoneNumber : ""})

    const onChangeInput = (event) => { setForm({...form,[event.target.name]: event.target.value}) }

    const onSubmit = (event) => {
        event.preventDefault();
        // 修正：字段名和state对齐
        if(form.fullName ==="" || form.phoneNumber===""){
            return false
        }
        addContact([...contacts , form]);
        // 可选优化：提交后清空表单
        setForm({fullName: "", phoneNumber: ""})
    }

    return (
        <form onSubmit={onSubmit}>
            Form List
            <div><input name="fullName" placeholder="fullName" value={form.fullName} onChange={onChangeInput}></input></div>
            <div><input name="phoneNumber" placeholder="phoneNumber" value={form.phoneNumber} onChange={onChangeInput}></input></div>
            
            <div>
                <button>Add</button>
            </div>
        </form>
    )
}

export default Form

注：上面代码额外给input加了value属性绑定表单状态，把输入框变成受控组件，避免输入值和state不同步的问题，还加了提交后清空表单的逻辑，属于可选优化项。

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