My React button is only working once, then no longer runs-CodePudding

I've been learning react recently and I am close to finishing a simple dice game (where 2 dice are rolled, and it announces which player won). However, when I run my code, the function in the button will only run one time, and the name does not update. I suspect this is because I'm not actually forcing the h1 to update(as react only updates the DOM when you've really specifically given it something that is being updated directly). However, I'm not sure what to do. I know that there are more efficient ways to make this, but for where I am at now in my learning, please try to refrain from telling me the better way to do it, but how I could improve my own version.

CodePudding user response：

Try :

getNum =()=> { .... }

OR :

<button onClick={() => this.getNum()}>Roll Dice

CodePudding user response：

You are not setting the state properly try this:

if(randNum > randNum2) {
      this.setState({...this.state, winName: 'Player 1'});
    } else if(randNum2 > randNum) {
      this.setState({...this.state, winName: 'Player 2'});
    } else {
      this.setState({...this.state, winName: "No one"})
    }

CodePudding user response：

Try this I just changed this and its working as expected

import React from "react";
import { Result } from "./Results.js";

import dice1 from "../assets/dice1.png";
import dice2 from "../assets/dice2.png";
import dice3 from "../assets/dice3.png";
import dice4 from "../assets/dice4.png";
import dice5 from "../assets/dice5.png";
import dice6 from "../assets/dice6.png";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: dice1,
      image2: dice2,
      num1: 1,
      num2: 1,
      winName: "Undecided"
    };
    this.getNum = this.getNum.bind(this);
  }

  getNum = () => {
    var randNum = Math.floor(Math.random() * 6)   1;
    var randNum2 = Math.floor(Math.random() * 6)   1;
    // this.setState({ num1: randNum, num2: randNum2 }); //sets num 1-6
    switch (randNum) {
      case 1:
        this.setState({ image: dice1, num1: randNum });
        break;
      case 2:
        this.setState({ image: dice2, num1: randNum });
        break;
      case 3:
        this.setState({ image: dice3, num1: randNum });
        break;
      case 4:
        this.setState({ image: dice4, num1: randNum });
        break;
      case 5:
        this.setState({ image: dice5, num1: randNum });
        break;
      case 6:
        this.setState({ image: dice6, num1: randNum });
        break;
      default:
        return <h1>Something went wrong.</h1>;
    }

    switch (randNum2) {
      case 1:
        this.setState({ image2: dice1, num2: randNum2 });
        break;
      case 2:
        this.setState({ image2: dice2, num2: randNum2 });
        break;
      case 3:
        this.setState({ image2: dice3, num2: randNum2 });
        break;
      case 4:
        this.setState({ image2: dice4, num2: randNum2 });
        break;
      case 5:
        this.setState({ image2: dice5, num2: randNum2 });
        break;
      case 6:
        this.setState({ image2: dice6, num2: randNum2 });
        break;
      default:
        return <h1>Something went wrong.(2)</h1>;
    }

    if (randNum > randNum2) {
      this.setState({ ...this.state, winName: "Player 1" });
    } else if (randNum2 > randNum) {
      this.setState({ ...this.state, winName: "Player 2" });
    } else {
      this.setState({ ...this.state, winName: "No one" });
    }
  };

  render() {
    return (
      <div className="entire-container">
        <img src={this.state.image} />
        <img src={this.state.image2} />
        <div className="dice-container">
          <button onClick={this.getNum}>Roll Dice</button>
        </div>
        <Result winner={this.state.winName} />
      </div>
    );
  }
}

CodePudding user response：

This is because

if(randNum > randNum2) {
  this.setState = ({ winName: 'Player 1'});
} else if(randNum2 > randNum) {
  this.setState = ({ winName: 'Player 2'});
} else {
  this.setState = ({ winName: "No one"})
}

In this snippet, you are reassigning this.setState (which is a function) to an object.

this.setState = ({ winName: 'Player 1'});

because of this, when u are running it a second time, you can't call this function as it an object after reassigning Not a function.

Do it like this:

this.setState({ winName: 'Player 1'});

as u are doing earlier.

Here is an example of the error.

var fun = () => console.log("I am a function");
console.log(fun);
fun();

fun = ({val:1});
console.log(fun);
fun(); //<--- this will give error