时间戳

首页 > 解决方案 > 如何根据来自 API 请求的数据生成随机按钮？

reactjs - 如何根据来自 API 请求的数据生成随机按钮？

问题描述

因此，我正在制作一个测验应用程序，其中的问题和答案是使用axios.

import React, { useState, useEffect, Component } from 'react';

const axios = require('axios').default;

const PlayQuiz = () => {
    // declaring all the state here
    const [questionsArray, setQuestionsArray] = useState([]);

    // Using effects here
    useEffect(() => {
        axios({
            method: 'get', 
            url: 'https://opentdb.com/api.php?amount=10',
        }).then(res => {setQuestionsArray(Object.values(res.data)[1])})
        .catch(err => console.error(err))
    }, []);


    useEffect(() => {console.log('questions array', questionsArray)}, [questionsArray]);

    // Returning html markup here 
    return (<>
        <div className = 'questions-container'>
            {questionsArray[0]? <h1>{questionsArray[0].question}</h1> : ''}
        </div>
    </>)
}


export default PlayQuiz;

这段代码基本上只是从 API 中获取数据并将其存储在questionsArray. 使用 questionsArray，我将第一个问题打印为标题，正如您从这段代码中看到的那样{questionsArray[0]? <h1>{questionsArray[0].question}</h1> : ''}。

在此处输入图像描述

这就是我的questionsArray样子。现在我想生成 4 个动态按钮，其中包含其中的答案。现在由于有两个答案值，一个是正确的，另一个是一系列不正确的答案，我无法想到如何以随机方式打印这些按钮，就像正确答案不应该是第一个选项. 我希望它是随机的，即它可以是第一个按钮、第二个按钮、第三个按钮或第四个按钮。我如何实现它？

标签： reactjsaxios

解决方案

您可以使用临时数组将所有答案存储在一起（正确和错误）并基于此数组进行渲染。您应该使用Math.random()将正确答案放在该数组的随机位置，如下所示：

import React, { useState, useEffect, Component } from "react";

const axios = require("axios").default;

const PlayQuiz = () => {
  // declaring all the state here
  const [questionsArray, setQuestionsArray] = useState([]);

  // Using effects here
  useEffect(() => {
    axios({
      method: "get",
      url: "https://opentdb.com/api.php?amount=10"
    })
      .then((res) => {
        setQuestionsArray(Object.values(res.data)[1]);
      })
      .catch((err) => console.error(err));
  }, []);

  useEffect(() => {
    console.log("questions array", questionsArray);
  }, [questionsArray]);

  const getAnswers = (q) => {
    const temp = [...q.incorrect_answers];
    const randomPosition = Math.floor(Math.random() * (temp.length + 1));
    temp.splice(randomPosition, 0, q.correct_answer);
    return temp;
  };
  // Returning html markup here
  return (
    <>
      <div className="questions-container">
        {questionsArray[0] ? (
          <div>
            <h1>{questionsArray[0].question}</h1>
            {getAnswers(questionsArray[0]).map((a) => {
              return <button key={a}>{a}</button>;
            })}
          </div>
        ) : (
          ""
        )}
      </div>
    </>
  );
};

export default PlayQuiz;

你可以看到它在这里工作

推荐阅读