Javascript React对象和数组

我试图根据json中提供的正确答案来匹配单击时的答案，但是因为我运行了一个map函数来返回数据，尽管我能够从对象中获取clicked button的值，但无法将其与正确答案与单击的答案相匹配

下面是我的代码

测验

import React, { useState } from "react";
import quizData from "../data/quizData.json";

export default function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(e) {
    let answer = value.quiz_questions[0].answer;
    if (answer === e.target.value) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(e.target.value);
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button key={index} onClick={handleClick} value={btn}>
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

上面的代码适用于第一个问题，因为我正在硬编码数组中第一个对象的答案，

---

我们是否有可能在数组中循环并使用单击的答案进行设置？

您需要找到第一个对象：

let answer = value.quiz_questions.find((data) => data.id == id)?.answer;

完整的handleClick功能逻辑：

function handleClick(btnValue, id) {
    let answer = value.quiz_questions.find((data) => data.id == id).answer;
    if (answer === btnValue) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(answer);
  }

以下是完整的代码：

import React, { useState } from "react";
import "./styles.css";

const quizData = {
  quiz_questions: [
    {
      id: 1,
      instruction_text: "How many continents are there on Planet Earth?",
      answer_options: ["5", "6", "7", "8"],
      answer: "7"
    },
    {
      id: 2,
      instruction_text: "What's your favorite number?",
      answer_options: ["1", "2", "3", "4"],
      answer: "4"
    }
  ]
};
function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(btnValue, id) {
    let answer = value.quiz_questions.find((data) => data.id == id).answer;
    if (answer === btnValue) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button
                  key={index}
                  onClick={(e) => handleClick(btn, quiz.id)}
                  value={btn}
                >
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Quiz />
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常数quizData={
问答题：[
{
id:1，
说明文字：“地球上有多少大陆？”，
回答选项：[“5”、“6”、“7”、“8”]，
答复：“7”
},
{
id:2，
说明文字：“你最喜欢的号码是什么？”，
回答选项：[“1”、“2”、“3”、“4”]，
答复：“4”
}
]
};
函数测验（）{
const[value，setValue]=useState（quizData）；
函数handleClick（BTN值，id）{
让answer=value.quick\u提问。查找（（data）=>data.id==id）。回答；
如果（答案===BTN值）{
警惕（“正确答案”）；
}否则{
提醒（“请选择正确答案”）；
}
控制台日志（应答）；
}
返回(
{value.quick_questions.map（（quick）=>{
返回(
{quick.instruction_text}

{quick.answer_options.map（（btn，索引）=>{
返回(
handleClick（btn，quick.id）}
值={btn}
>
{btn}
);
})}
);
})}
);
}
导出默认函数App（）{
返回(
你好，代码沙盒
);
}

---

下面是演示：

您可以在handleClick方法中传递问题id，并使用该id找到正确答案。此外，您还可以直接传递所选答案，而不是传递事件

export default function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(quesId, selectedAnswer) {
    let answer = value.quiz_questions.filter(question => question.id === quesId)[0].answer;
    if (answer === selectedAnswer) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(selectedAnswer);
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button key={index} onClick={() => handleClick(quiz.id, btn)} value={btn}>
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

导出默认函数测验（）{
const[value，setValue]=useState（quizData）；
函数handleClick（quesId，selectedAnswer）{
让answer=value.quick\u questions.filter（question=>question.id==quesId）[0]。答案；
如果（回答===所选回答）{
警惕（“正确答案”）；
}否则{
提醒（“请选择正确答案”）；
}
console.log（选择拒绝）；
控制台日志（应答）；
}
返回(
{value.quick_questions.map（（quick）=>{
返回(
{quick.instruction_text}

{quick.answer_options.map（（btn，索引）=>{
返回(
handleClick（quick.id，btn）}值={btn}>
{btn}
);
})}
);
})}
);
}

您可以尝试修改后的源代码版本（特别是带有map（）的版本），您会注意到，已附加了onLoad事件，以帮助在加载文档时捕获答案选项，然后handleClick函数将从中提取。也就是说，以下是源代码的修改版本，在inside return（）之后开始：

{value.quick\u questions.map（（quick）=>{
返回(
{quick.instruction_text}

{quick.answer_options.map（（btn，索引）=>{
返回(
setValue（btn）}onClick={handleClick}value={btn}>
{btn}
);
})}
);
})}

请注意，已合并onLoad事件处理程序，以便在您希望将数据链接到后端api时，它有助于状态管理。

export default function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(quesId, selectedAnswer) {
    let answer = value.quiz_questions.filter(question => question.id === quesId)[0].answer;
    if (answer === selectedAnswer) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(selectedAnswer);
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button key={index} onClick={() => handleClick(quiz.id, btn)} value={btn}>
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

    {value.quiz_questions.map((quiz) => {
            return (
              <div key={quiz.id}>
                <p>{quiz.instruction_text}</p>
                {quiz.answer_options.map((btn, index) => {
                  return (
                    <button key={index} onLoad={() => setValue(btn)} onClick={handleClick} value={btn}>
                      {btn}
                    </button>
                  );
                })}
              </div>
            );
    })}