类型错误：this.props.createNewContact 不是 function

Question

 I am trying to create a contact by from the user user input in NewContactForm component and display it on the screen in ContactList component I tried to use one state thinking that maybe its because I am using multiple states but it didn't work. NewContactForm.js // Method that will submit the users input after click submit button handleSubmit(event) { // Prevent the page reloads after submission event.preventDefault(); this.props.createNewContact(this.state); // After submitting the input, clear the states this.setState({ contactName: "" }, { contactNumber: "" }); } ContactList.js // Define a method that will create a new contact create(newContact) { this.setState({ contacts: [...this.state.contacts, newContact] }); } render() { let contacts = this.state.contacts.map(contact => { return ( <Contact eachContactName={contact.eachContactName} eachContactNumber={contact.eachContactNumber} /> ); }) return ( <div> <h1>Phone Book Manager</h1> <table> <tr> <th>Name</th> <th>Phone Number</th> <th>Edit</th> <th>Delete</th> </tr> {contacts} </table> <NewContactForm createNewContact={this.create} /> <Link to="/NewContactForm/"><i class="fa fa-plus"></i>Add Contact</Link> </div> ); } } export default ContactList;

 I am trying to create a contact by from the user user input in NewContactForm component and display it on the screen in ContactList component I tried to use one state thinking that maybe its because I am using multiple states but it didn't work. NewContactForm.js // Method that will submit the users input after click submit button handleSubmit(event) { // Prevent the page reloads after submission event.preventDefault(); this.props.createNewContact(this.state); // After submitting the input, clear the states this.setState({ contactName: "" }, { contactNumber: "" }); } ContactList.js // Define a method that will create a new contact create(newContact) { this.setState({ contacts: [...this.state.contacts, newContact] }); } render() { let contacts = this.state.contacts.map(contact => { return ( <Contact eachContactName={contact.eachContactName} eachContactNumber={contact.eachContactNumber} /> ); }) return ( <div> <h1>Phone Book Manager</h1> <table> <tr> <th>Name</th> <th>Phone Number</th> <th>Edit</th> <th>Delete</th> </tr> {contacts} </table> <NewContactForm createNewContact={this.create} /> <Link to="/NewContactForm/"><i class="fa fa-plus"></i>Add Contact</Link> </div> ); } } export default ContactList;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在尝试通过 NewContactForm 组件中的用户用户输入创建联系人并将其显示在 ContactList 组件的屏幕上