Tengo el siguiente código, que lleva a cabo una variedad de controles de estado:

 CheckValStates= () => { _stateCheck = val => { if (!val || val == '' ) { return true; } return false; }; if ( this._stateCheck(this.state.arReason) || this._stateCheck(this.state.handoverType) || (this.state.handoverType === 'CUSTOMER' && this._stateCheck(this.state.staffHandoverDeets)) || (this.state.handoverType === 'GUARD' && this._stateCheck(this.state.keyStatus) && this._stateCheck(this.state.staticOfficerHandover)) ) { return true; } return false; }; }

Estaba teniendo problemas con la siguiente línea:

 (this.state.handoverType === 'GUARD' && this._stateCheck(this.state.keyStatus) && this._stateCheck(this.state.staticOfficerHandover)) )

Devuelve verdadero si solo los 2 primeros elementos son verdaderos; la tercera verificación ( this._stateCheck(this.state.staticOfficerHandover) ) se ignora. Esperaba que los tres controles coincidieran para obtener un resultado real.

Si reemplazo esa declaración encadenada con -

 if ( this._stateCheck(this.state.arReason) || this._stateCheck(this.state.handoverType) || (this.state.handoverType === 'CUSTOMER' && this._stateCheck(this.state.staffHandoverDeets)) || (this.state.handoverType === 'GUARD' && this._stateCheck(this.state.keyStatus) || this.state.handoverType === 'GUARD' && this._stateCheck(this.state.staticOfficerHandover) ) )

lleva a cabo la comprobación como se esperaba. Me gustaría entender por qué.