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组件的屏幕上

  ask by Christian Niyokwizerwa translate from so

本文未有回复,本站智能推荐:

1回复

TypeError:props.handleToggle不是函数

我在React上编写了我的第一个Todo应用程序。 我收到TypeError:props.handleToggle不是一个函数并且不明白为什么?(另一个处理程序正在工作)。 为什么此功能不能成为功能? 我在做什么错以及需要阅读什么? App.js TodoList.js Tod
1回复

TypeError:this.props.header不是函数

我试图在我的项目中使用@ercpereda/react-native-accordion包的Accordion组件。 这是他们在自述文件中提供的示例用法: 这是我尝试渲染Accordion : 在我的render方法中定义headers ,如下所示: 以及方法generateHea
4回复

TypeError:this.props.setLoginDisabled不是函数

有一个名为Login的屏幕,它从loginActions传入一个动作创建者, loginActions所示: https://gist.github.com/ldco2016/e2feedc5460e64e9b740af73cec5fe89 当我启动应用程序并单击“登录”按钮时,出现以下
1回复

TypeError:this.props.dispatch不是函数

我想通过单击“登录”或“注册”按钮显示一个模块化窗口,并且出现以下错误(TypeError:_this.props.dispatch不是函数)。 一个项目中的相同代码通常可以在另一个项目中工作。
2回复

TypeError:this.props.function不是函数

首先,我想说的是,我知道关于这个话题有很多问题。 我通读了其中的大部分内容,并仔细检查了我的代码,但似乎无法正常工作。 我有以下子组件,其中包含一个图像,您可以通过单击该图像进行更改(可以迭代5个图像的数组)。 这是父组件: 奇怪的是,它与同一子组件中的另一个函数完美配合。 我使
2回复

TypeError:this.props.updateCommentText不是函数

我一直在关注反应的教程。 一切都很好,但是现在我似乎无法解决一个错误。 非常感谢您的帮助。 我正在尝试为注释编辑文本变量,但是当我尝试调用该函数时,出现以下错误。 错误:TypeError: this.props.updateCommentText is not a functio
4回复

TypeError:this.props.searchYelp不是函数?

只是因为你知道我是javascript和react.js的初学者。 我正在从Codecademy开发一个项目,我遇到了错误代码。 我收到的错误代码: 我的SearchBar.js代码: 我的App.js代码: 有人能帮帮我吗? 我哪里出错了? 我有谷歌我的错误代码,似乎无
2回复

TypeError:this.props.AddNewHero不是函数

我知道这种问题已经在StackOverFlow上发布了很多,但是在我的代码中,我找不到我的代码无法正常工作的错误。 我尝试在AddHero.js组件(这是一个子组件)中创建一个新Hero,并将该新Hero更新为App.js(父组件)中的状态。 但是我得到了显示TypeError的错误: t