在反應中洗牌

我正在從 api 獲取資料。嘗試從 API 的資料中制作測驗應用程式。我選擇了隨機國家及其各自的首都并將它們映射到我的測驗應用程式。我已經實作了這一點。現在我正在嘗試改組我的回答選項但無法做到這一點。任何人都可以幫忙嗎？這是我的代碼

import React from "react";
import "./Quiz.css";
import { useState, useEffect } from "react";
function Quiz() {

    const [cname, scname] = useState([]);
  const [results, finalres] = useState(false);
  const [score, setScore] = useState(0);
  const [currentQues, setCurrentQues] = useState(0);
   //Get Method
   useEffect(() => {
    fetch("https://countriesnow.space/api/v0.1/countries/capital")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        scname(data.data);
      });
  }, []);
//   const questions=[{},[{}]];
//   const questionText=Array.of(data.data.name)

//   const answerOptions=[{}];

const restartGame = () => {
    setScore(0);
    setCurrentQues(0);
    finalres(false);


  };
  let namearray = [5];
  var capitalArray = [5];

  let fx = (i) => {
    let countryName = "";
    let capitalName = "";
    let countryNum = Math.floor(Math.random() * cname.length);
    if (countryNum) {
      countryName = cname[countryNum].name;
      capitalName = cname[countryNum].capital;
      
    }
    namearray[i] = countryName;
    capitalArray[i] = capitalName;
  };

  for (let i = 0; i < 5; i  ) {
    fx(i);
  }

// console.log(capitalArray.length)
// function shuffle(array) {
//     let currentIndex = array.length,  randomIndex;
  
//     // While there remain elements to shuffle.
//     while (currentIndex != 0) {
  
//       // Pick a remaining element.
//       randomIndex = Math.floor(Math.random() * currentIndex);
//       currentIndex--;
  
//       // And swap it with the current element.
//       [array[currentIndex], array[randomIndex]] = [
//         array[randomIndex], array[currentIndex]];
//     }
  
//     return array;
   
//   }


  
  const questions = [
    {
      questionText: "What is the capital of "   namearray[0]   "?",
      answerOptions: [
        { answerText: capitalArray[0], isCorrect: true },
        { answerText: capitalArray[1], isCorrect: false },
        { answerText: capitalArray[2], isCorrect: false },
        { answerText: capitalArray[3], isCorrect: false },
      ],
    },
    {
      questionText: "What is the capital of "   namearray[1]   "?",
      answerOptions: [
        { answerText: capitalArray[4], isCorrect: false },
        { answerText: capitalArray[1], isCorrect: true },
        { answerText: capitalArray[0], isCorrect: false },
        { answerText: capitalArray[3], isCorrect: false },
      ],
    },
    {
      questionText: "What is the capital of "   namearray[2]   "?",
      answerOptions: [
        { answerText: capitalArray[1], isCorrect: false },
        { answerText: capitalArray[0], isCorrect: false },
        { answerText: capitalArray[2], isCorrect: true },
        { answerText: capitalArray[3], isCorrect: false },
      ],
    },
    {
      questionText: "What is the capital of "   namearray[3]   "?",
      answerOptions: [
        { answerText: capitalArray[0], isCorrect: false },
        { answerText: capitalArray[2], isCorrect: false },
        { answerText: capitalArray[1], isCorrect: false },
        { answerText: capitalArray[3], isCorrect: true },
      ],
    },
    {
      questionText: "What is the capital of "   namearray[4]   "?",
      answerOptions: [
        { answerText: capitalArray[4], isCorrect: true },
        { answerText: capitalArray[1], isCorrect: false },
        { answerText: capitalArray[2], isCorrect: false },
        { answerText: capitalArray[3], isCorrect: false },
      ],
    },
  ];
  const hoc = (isCorrect) => {
    if (isCorrect === true) {
      setScore(score   1);
    }
    const nextq = currentQues   1;
    if (nextq < questions.length) {
      setCurrentQues(nextq);
    } else {
      finalres(true);
    }

  
  };

//   const shuffle = () => 0.5 - Math.random();

// const testQuestions = questions.map(q => ({
//   ...q,
//   // this one shuffles the answers...
  
//   answerOptions: q.answerOptions.sort(shuffle)
  
// })  
// )
 console.log('data')
  return (
    <>
      <h4>Quiz</h4>
      <div id="head">Welcome User</div>
      <hr />
      {results ? (
        <div className="final-res">
          Final Results
          <h4>you scored {score} out of 5</h4>
          <button onClick={() => restartGame()}>Restart</button>
        </div>
      ) : (
        <div>
          <div id="quescard">
            <h3>
              {currentQues   1}. {questions[currentQues].questionText}
            </h3>
            {questions[currentQues].answerOptions.map((ansopt) => (
            
              <button onClick={() => hoc(ansopt.isCorrect)}>
                {ansopt.answerText}
              </button>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

export default Quiz

我已經應用了隨機播放功能，但不確定它是否有效

uj5u.com熱心網友回復：

您可以對陣列進行洗牌，以便在組件函式體中有一個函式，如下所示

const shuffledAnswers = (currentQues) => {
  let shuffled = questions[currentQues].answerOptions
    .map((value) => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value);

  return shuffled;
};

然后在渲染中你可以呼叫它

{
  shuffledAnswers(currentQues).map((ansopt) => (
    <button onClick={() => hoc(ansopt.isCorrect)}>{ansopt.answerText}</button>
  ));
}

添加相關代碼只是為了保持簡單......希望它有效并且是預期的結果

標籤：javascript反应api随机的洗牌

上一篇：htaccess重定向以排除某些頁面

下一篇：我正在嘗試從電影資料庫中按流派獲取電影