If / Else / Switch returning the wrong results

问题

I'm making a Rock-Paper-Scissors-Lizard-Spock (Big Bang Theory, the tv show) using ReactJS and i'm facing some kind of abstract issue.

switch (this.state.playerOnePick === 'Rock') {
    case((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')):
    return (
        <div>
            <h1>Player One wins !</h1>
            <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
        </div>
    );
        break;
    case((this.state.playerTwoPick === 'Paper') || (this.state.playerTwoPick === 'Spock')):
        return (
            <div>
                <h1>Player Two wins !</h1>
                <h2>P1: {this.state.playerOnePick}
                    P2: {this.state.playerTwoPick}</h2>
            </div>
        );
        break;

}

switch (this.state.playerOnePick === 'Lizard') {
    case((this.state.playerTwoPick === 'Spock') || (this.state.playerTwoPick === 'Paper')):
        return (
            <div>
                <h1>Player One wins !</h1>
                <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
            </div>

        );
        break;
    case((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Rock')):
        return (
            <div>
                <h1>Player Two wins !</h1>
                <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
            </div>
        );
        break;

}

Rock vs Paper is returning the right results, no matter who's picking it, when P1: Rock, P2: Lizard, P1 wins as expected, but when P1: Lizard P2: Rock, it is returning that P1 wins..

What it returns me when P1:Lizard P2:Rock

There is nowhere where Lizard is supposed to win vs Rock...

(playerOnePick and playerTwoPick are correctly updated as the player pick a weapon)

回答1:

The correct usage of switch statements would be

switch (this.state.playerOnePick) {
    case 'Rock':
        switch (this.state.playerTwoPick) {
            case 'Scissors'):
            case 'Lizard':
                return "Player One wins!";
                break; // unnecessary after `return` but well
            case 'Paper':
            case 'Spock':
                return "Player Two wins!";
                break; // as above
        }
        break;
    case 'Lizard':
        switch (this.state.playerTwoPick) {
            case 'Spock':
            case 'Paper':
                return "Player One wins!"
            case 'Scissors':
            case 'Rock':
                return "Player Two wins!";
        }
        break;
}

What you have shown is the layout for if/else, with lots of boolean conditions:

if (this.state.playerOnePick === 'Rock') {
    if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Paper') || (this.state.playerTwoPick === 'Spock')) {
        return "Player Two wins!";
    }
} else if (this.state.playerOnePick === 'Lizard') {
    if ((this.state.playerTwoPick === 'Spock') || (this.state.playerTwoPick === 'Paper')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Rock')) {
        return "Player Two wins!";
    }
}

However, the real issue with implementing Rock-Paper-Scissors-Lizard-Spock is all that duplication (which leaves a lot room for error). The actual programming task is to figure out how to reduce that.
Tip: Assign each possible pick an integer number, and play around with some maths.
Write a separate function winner(pick1, pick2) that returns -1 when the first player wins, 0 for a tie, and 1 when the second player wins. Then simply call that from the ReactJS code that is concerned with the UI stuff.

回答2:

Switch case does not work like that. If you want to use switch case, you'd do something like:

switch(playerOnePick) {
 case 'Rock':
   switch(playerTwoPick) {
    case 'Scissors':
    case 'Lizard':
      // Player 1 wins
      break;
    case 'Paper':
    case 'Spock':
    // Player 2 wins
    break;
   }
   break;
 case 'Lizard':
   switch(playerTwoPick) {
    case 'Spock':
    case 'Paper': 
      // Player 1 wins
     break;
    case 'Scissors':
    case 'Rock': 
    // Player 2 wins
    break;
 }
}

etc.

Edit: Your code written like that is constructed for if statements, if you replace the switch and case with if, it will work.

回答3:

Its because you've set it that way. look at last<h1>.

Say, you could write a better switch/case statement to evaluate the condition. You are highly repeating yourself which is against DRY(Don't Repeat Yourself) principal.

You can pull <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2> completely out of switch block & place it immediately after switch's closing }. Or you'd better put only one single value per case instead of combining couple of them under one case. It makes it much harder to follow the code. This is my choice for this particular switch-case:

switch (this.state.playerOnePick === 'Rock') {
    case(this.state.playerTwoPick === 'Scissors'):
         return ( <div> <h1>Player One wins !</h1> </div>);
         break;
    case(this.state.playerTwoPick === 'Lizard')):
         return ( <div> <h1>Player One wins !</h1> </div>);
         break;
    case(this.state.playerTwoPick === 'Paper'):
         return ( <div> <h1>Player Two wins !</h1> </div>);          
         break;
    case(this.state.playerTwoPick === 'Spock'):
         return ( <div> <h1>Player Twi wins !</h1> </div>);        
         break;
    }
// The same goes for second switch
<div><h2>P1: {this.state.playerOnePick} P2:{this.state.playerTwoPick}</h2><div>

来源：https://stackoverflow.com/questions/42520994/if-else-switch-returning-the-wrong-results