Actualmente estoy aprendiendo a reaccionar y siguiendo un video tutorial, y me quedo atascado con un objeto que no se puede pasar a otro método, pero cuando pasé una identificación, funciona bien.
aquí está el método
handleIncrement = (product) => { console.log(product); this.setState({ count: this.state.count + 1 }); };
y este es el método que trato de transmitir
render() { return ( <div> <span className={this.getBadgeClasses()}>{this.formatCount()}</span> <button onClick={this.handleIncrement({ id: 1 })} className="btn btn-secondary btn-sm" > Increment </button> </div> );
el producto en onClick={this.handleIncrement(product)}
error como indefinido
src\components\counter.jsx Line 19:47: 'product' is not defined no-undef
pero si uso onClick={() => this.handleIncrement({ id:1 })}
funciona bien, y también funciona cuando uso onClick={(product) => this.handleIncrement(product)}
El problema que tienes es con
onClick={this.handleIncrement({ id: 1 })}
Esta es la confusión habitual para los novatos en ReactJS, pero aquí está la regla general, tiene dos formas
parameter
funcWithoutParam = () => { console.log('hi') }; onClick={this.funcWithoutParam}
parameter
handleIncrement = (param) => { console.log(param) } onClick={() => this.handleIncrement({ id: 1 })}
El controlador de eventos onClick
debe ser una función, no una llamada de función. Es por eso que el ejemplo que proporcionó onClick={() => this.handleIncrement({ id:1 })}
funciona como esta es una función anónima, mientras que el ejemplo en el que está llamando a la función no funciona.