Question

目前，我的代码如下所示。它基本上是一个测验应用程序。默认情况下，页面加载时，问题会显示在底部。我们有四个参赛者，在回答问题之前，必须先单击给出的任何蜂鸣器按钮，然后单击选项中的“正确”时将发出警报，提示正确答案，如果错误，则将使该特定参赛者的得分提高3答案，然后将point的值减少1。

单击蜂鸣器按钮后，状态中包含一个名为playerBuzzer的对象，默认情况下，该对象为null，将其更改为指定的索引号。数组例如，如果单击詹姆斯蜂鸣器，playerBuzzer更改为0，如果单击史蒂夫蜂鸣器，则playerBuzzer更改为3。所以现在我想要的是，所以现在我单击蜂鸣器按钮，现在playerBuzzer的状态更改为特定索引如果正确的答案递减，或者错误的答案（我将仅显示必要的代码），则更改数组的特定索引的“点”。

class Sec2 extends Component {
  state = {
    players: [
      {
        name: "James",
        point: 0
      },
      {
        name: "Julia",
        point: 0
      },
      {
        name: "Martha",
        point: 0
      },
      {
        name: "Steve",
        point: 0
      }
    ],
buzz(z) {//changes the playerBuzzer when buzzer button is clicked
    if (z == "James") {
      this.setState({ playerBuzzer: 0 });
    }
    if (z == "Julia") {
      this.setState({ playerBuzzer: 1 });
    }
    if (z == "Martha") {
      this.setState({ playerBuzzer: 2 });
    }
    if (z == "Steve") {
      this.setState({ playerBuzzer: 3 });
    }
  }
 checkAnswer(x) { //When the option under question is clicked this method 
                   // happens
    if (this.state.currentQuestion == 1 && x == "New Delhi") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 2 });
    } else if (this.state.currentQuestion == 1 && x != "New Delhi") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 2 });
    }
     if (this.state.currentQuestion == 2 && x == "Paris") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 3 });
    } else if (this.state.currentQuestion == 2 && x != "Paris") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 3 });
    }
    if (this.state.currentQuestion == 3 && x == "Pound") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 4 });
    } else if (this.state.currentQuestion == 3 && x != "Pound") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 4 });
    }
     if (this.state.currentQuestion == 4 && x == "8848 m") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 5 });
    } else if (this.state.currentQuestion == 4 && x != "8848 m") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 5 });
    }
    if  (this.state.currentQuestion == 5 && x == "Tokyo") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 6 });
    }     else if (this.state.currentQuestion == 5 && x != "Tokyo") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 6 });
    }
  }[![initial output][1]][1]

Answer 1

我没有所有的背景信息，所以也许我错过了一些;）

我重写了您的状态管理，以使事情变得更清楚。

但是我不知道您从哪里获取问题和答案，所以我希望它至少对您有帮助。

... your class
  state = {
    playerBuzzer: null,
    players: {
      James: {
        name: "James",
        point: 0
      },
      Julia: {
        name: "Julia",
        point: 0
      },
      Martha: {
        name: "Martha",
        point: 0
      },
      Steve: {
        name: "Steve",
        point: 0
      }
    },
    currentQuestion: 1,
    answers: {
      1: "New Delhi",
      2: "Paris" // and so on
    }
  };

  buzz(playerId) {
    //changes the playerBuzzer when buzzer button is clicked
    this.setState({
      playerBuzzer: playerId
    });
  }

  checkAnswer(answer) {
    const { answers, currentQuestion, playerBuzzer, players } = this.state; // This is know as destructuration. You "explode" the state in variables.
    const { point } = players[playerBuzzer];
    const isCorrect = answers[currentQuestion] === answer; // We get the response for the current question. Normalization makes things magic :)
    const nextQuestion = currentQuestion + 1;
    //When the option under question is clicked this method
    // happens
    let updatedPoints;

    if (isCorrect) {
      updatedPoints = point + 1;
      alert("Correct Answer");
    } else {
      updatedPoints = point - 1;
      alert("Wrong Answer");
    }

    this.setState({
      players: {
        ...players, // required to not delete all users :)
        [playerBuzzer]: {
          point: updatedPoints
        }
      },
      currentQuestion: nextQuestion
    });
  }

这个想法是要“规范化”您的数据结构，使事情变得更容易。

这与您的问题没有直接关系，但是您可以通过此链接学到很多东西（redux是React应用的高级状态管理，但不在此处；））

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

Answer 2

每个玩家都应该是自己的班级。

class Player{
   constructor(name)..
}

为每个按钮分配一个带有事件侦听器的播放器。然后运行您的checkAnswer函数（应该返回布尔值）。如果为true，player.score + = 3，则为player.score-;

我认为您应该仅将布尔值分配给每个答案，例如class =“ bad-answer” /“ good-answer”。因为在动态生成内容时您不会头痛。：）

更改状态输入，该状态输入是存在于JSON数组中的JSON对象

2 个答案: