如何随机化数据库字段读取？[ReactJS&；Firestore]

我目前正在React中开发一个类似测验的应用程序，并使用Firestore存储我的问题和多项选择题答案。目前，我在以下字段中有我的答案和错误答案：答案、错误答案1、错误答案2和错误答案3。我知道这可能不是最好的方式，我不是很有经验的后端

目前，我在“答案”和“错误答案”字段中进行渲染，但是，对于每个问题，它们显然都在相同的位置进行渲染，渲染这些问题的最佳方式是什么，以使它们是随机的

我在想象，我必须将它们放入某种数组中，但我不确定我将如何做到这一点

任何帮助都将不胜感激

干杯， 瑞安

编辑：

我的多项选择题的当前代码：

   render() {
        return (
            <div className = "MultipleChoice">
                <h1> Multiple Choice </h1>
                <form>
                <label> {this.props.question}  </label>
                <input type = "radio" name = {this.props.question} /> {this.props.answer}
                <input type = "radio" name = {this.props.question} /> {this.props.wrongAnswer}
                <input type = "radio" name = {this.props.question} /> {this.props.wrongAnswer2}
                <input type = "radio" name = {this.props.question} /> {this.props.wrongAnswer3}
                </form>
            </div>
        )
    }

render（）{
返回(
选择题
{this.props.question}
{this.props.answer}
{this.props.errowresponse}
{this.props.ErrorAnswer2}
{this.props.ErrorAnswer3}
)
}

道具通过app.js传入

<MultipleChoice  question = {questionType.question} answer = {questionType.answer} wrongAnswer = {questionType.wrongAnswer} wrongAnswer2 = {questionType.wrongAnswer2} wrongAnswer3 = {questionType.wrongAnswer3}/>

数据库结构：

---

因为没有给出代码或数据结构，所以很难编写最适合您的特定情况的解决方案。 如果您已经在使用任何实用程序库，则可以在此库中搜索所需的工具。例如，

lodash

has正在做您需要的事情。 也就是说，您不需要仅为一种方法添加

lodash

Math.random（）

可以做类似的事情

const unshuffledAnswers = ['a', 'b', 'c', 'd'];
const shuffledAnswers = [];

const pick = (collection) => {
   var card = Math.floor(Math.random() * collection.length);
   return collection.splice(card, 1)[0];
}

for (let i = 0, length = unshuffledAnswers.length; i < length; i++) {
  shuffledAnswers.push(pick(unshuffledAnswers));
}

const unsuffledanswers=['a'，'b'，'c'，'d']；
常量shuffledAnswers=[]；
常量拾取=（集合）=>{
var card=Math.floor（Math.random（）*collection.length）；
返回集合。拼接（卡，1）[0]；
}
for（设i=0，length=unsuffledanswers.length；i

已更新 带有答案的组件代码可以是这样的（如果您的组件是类组件，而不是功能组件）

pick=（集合）=>{
var card=Math.floor（Math.random（）*collection.length）；
返回集合。拼接（卡，1）[0]；
}
获取答案（）{
const{问题，答案，错误答案，错误答案2，错误答案3}=this.props；
const unshuffledAnswers=[答案，错误答案，错误答案2，错误答案3]；
常量shuffledAnswers=[]；
for（设i=0，length=unsuffledanswers.length；i）；
}
render（）{
返回(
选择题
{this.props.question}
{this.answers}
)
}

因为没有给出代码或数据结构，所以很难编写最适合您的特定情况的解决方案。 如果您已经在使用任何实用程序库，则可以在此库中搜索所需的工具。例如，

lodash

has正在做您需要的事情。 也就是说，您不需要仅为一种方法添加

lodash

Math.random（）

可以做类似的事情

const unshuffledAnswers = ['a', 'b', 'c', 'd'];
const shuffledAnswers = [];

const pick = (collection) => {
   var card = Math.floor(Math.random() * collection.length);
   return collection.splice(card, 1)[0];
}

for (let i = 0, length = unshuffledAnswers.length; i < length; i++) {
  shuffledAnswers.push(pick(unshuffledAnswers));
}

const unsuffledanswers=['a'，'b'，'c'，'d']；
常量shuffledAnswers=[]；
常量拾取=（集合）=>{
var card=Math.floor（Math.random（）*collection.length）；
返回集合。拼接（卡，1）[0]；
}
for（设i=0，length=unsuffledanswers.length；i

已更新 带有答案的组件代码可以是这样的（如果您的组件是类组件，而不是功能组件）

pick=（集合）=>{
var card=Math.floor（Math.random（）*collection.length）；
返回集合。拼接（卡，1）[0]；
}
获取答案（）{
const{问题，答案，错误答案，错误答案2，错误答案3}=this.props；
const unshuffledAnswers=[答案，错误答案，错误答案2，错误答案3]；
常量shuffledAnswers=[]；
for（设i=0，length=unsuffledanswers.length；i）；
}
render（）{
返回(
选择题
{this.props.question}
{this.answers}
)
}

谢谢，我现在就添加数据结构和代码！如果答案对您有效，请随时将其标记为正确答案：）@RyanNisbet我已根据您的UpdateAnks更新了一个解决方案。为此，我现在将添加我的数据结构和代码！如果这个答案对您有效，请随时将其标记为正确答案：）@RyanNisbet我已经根据您的更新更新了一个解决方案