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

Question

现在我的代码看起来像这样。它基本上是一个测验应用程序。默认情况下，当页面加载时，问题出现在底部。我们有四名参赛者，在回答问题之前，必须单击之后给出的任何蜂鸣器按钮，如果正确，则单击选项时，它将发出警告，提示正确答案，如果错误，则该特定参赛者的分数将增加 3回答然后将点的值减 1。

单击蜂鸣器按钮后，状态有一个名为 playerBuzzer 的对象，默认情况下为 null 并更改为指定的索引号。阵列的 例如，如果单击 james buzzer playerBuzzer 更改为 0，如果单击 steve buzzer 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