为什么我遇到了不可迭代的?

Question

我有这个错误，我上周开始学习React，所以我不能解决这个问题。

Uncaught TypeError: contacts is not iterable
at onSubmit (index.js:15:1)

接触组件

import List from "./List"
import Form from "./Form"
import {useState,useEffect} from "react"
import React  from "react"
function Contacts(){
const [contacts,setContacts] = useState([]);
useEffect(()=>{
console.log(contacts)
},[contacts])   
return (
<div>
<List/>
<Form addContact = {setContacts} contacts={contacts}/>
</div>
)
}

export default Contacts

表单组件

import React from "react"
import { useState } from "react"
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();
if(form.name ==="" || form.phoneNumber===""){
return false
}
addContact([...contacts , form]);
}
return (
<form onSubmit={onSubmit}>
Form List
<div><input name="fullName" placeholder="fullName" onChange={onChangeInput}></input></div>
<div><input name="phoneNumber" placeholder="phoneNumber" onChange={onChangeInput}></input></div>

<div>
<button>Add</button>
</div>
</form>
)
}

export default Form

Answer 1

请使用这样的道具{}

换行

function Form({ addContact, contacts }){
...
...
...
}