Estoy siguiendo un tutorial para principiantes de Pluralsight, en el envío del formulario se pasa un valor al método del componente addUser y necesito enviar el nombre de usuario a this.state.users pero recibo un error
App.jsx:14 Uncaught TypeError: Cannot read property 'users' of undefinedComponente
import React from 'react' import User from 'user' import Form from 'form' class Component extends React.Component { constructor() { super() this.state = { users: null } } // This is triggered on form submit in different component addUser(userName) { console.log(userName) // correctly gives String console.log(this.state) // this is undefined console.log(this.state.users) // this is the error // and so this code doesn't work /*this.setState({ users: this.state.users.concat(userName) })*/ } render() { return ( <div> <Form addUser={this.addUser}/> </div> ) } } export default ComponentCuando llama a {this.addUser} , se llama, aquí this es una instancia de su clase (componente) y, por lo tanto, no le da ningún error porque el método addUser existe en el scope de su clase, pero cuando está bajo el método addUser está utilizando this para actualizar el state que existe en el alcance de la clase (componente), pero actualmente se encuentra dentro del alcance del método addUser , por lo que le da un error ya que en addUser Scope no tiene nada como estado, usuario, etc. para lidiar con este problema, debe vincular this mientras llama addUser Para que su método siempre conozca la instancia de this .
Entonces, el cambio final en su código se verá así:
<Form addUser={this.addUser.bind(this)}/>O
this en el constructor, porque es el lugar donde debe inicializar las cosas porque los métodos del constructor se llaman primero cuando los componentes se procesan en el DOM .Entonces puedes hacerlo de esta manera: -
constructor(props) { super(props); this.state = { users: null } this.addUser=this.addUser.bind(this); }Y ahora puede llamarlo de manera normal como lo hizo antes: -
<Form addUser={this.addUser}/>Espero que esto funcione, y te lo dejé claro.
Los enfoques de @Vinit Raj funcionan perfectamente, aunque prefiero usar la sintaxis de la función de flecha así.
<Form addUser={ () => this.addUser() }/>Usando una función anónima como esta, no necesita vincularla en ningún lado.
Si prefiere usar la función de flecha, haga esto. La sintaxis de la función de flecha como se muestra a continuación
addUser = event => { const { value } = event.target; console.log("value", value); }Para evitar que se llame a esta función en cada renderizado o re-renderizado, debe
Cambio
<Form addUser={this.addUser}/>Para
<Form addUser={() => this.addUser()}/>De modo que se llame a addUser solo cuando ocurra/desencadene un evento