创建动态按钮

Question

尝试使用React创建一个小型应用程序作为大学作业的一部分。基本任务是创建一个有问题的页面，然后有5个答案中的一个。我现在把答案存储在消防仓库的文件中。

我已经创建了一个自定义按钮组件。

所以我的代码确实联系了消防商店，我得到了数据。我在大学里尝试过的例子是获得1位数据，而不是这样。我想做的是创造一个答案"；阵列"；然后我可以迭代并创建我的自定义按钮。然而，我无法停止思考如何创建答案数组。

有人能给我一个提示吗？

import React, {useEffect, useState} from 'react';
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
import Button from '../components/Button';
function AnswerComponent() {
const firestore = firebase.firestore();
//const storage = firebase.storage();
const collectionId = "Balances";
const documentId = "Answers"
const [answers, setAnwsers] = useState([]);
useEffect(() => {
const getFirebase = async () => {
const snapshot = await firestore.collection(collectionId).doc(documentId).get();
const questionData = snapshot.data();      
// now we add the answers and correct flag to our answers
const answerArr = [];
Object.keys(questionData).forEach(key => {
answerArr.push(questionData[key]); 
setAnwsers(answerArr)
});      
};
getFirebase();
},[answers, firestore])
console.log(">>", answers)

return (
<div className="col-12">
<h3 className="text-center">Answer</h3>
<div className="p-3 mb-2 bg-light">
<div className="row">

</div>
{/* {btns} */}
</div>
</div>     
)
}
export default AnswerComponent;

Answer 1

需要将新答案推送到数组中，此解决方案将每个答案保存为一个带有键的对象(保留键(。

const answerArr = [];
Object.keys(questionData).forEach(key => {
answerArr.push({ [key]: questionData[key] });
setAnswers(newAnswerArr);
});

如果你不需要密钥，你可以保存一个步骤并使用Object.values:

const answerArr = [];
Object.values(questionData).forEach(questionValue => {
answerArr.push(questionValue);
});
setAnwsers(answerArr);

或者使用任何一种解决方案，您都可以减少anwserArr，而不是单独设置：

const answerArr = Object.values(questionData).reduce((acc, questionValue) => {
acc.push(questionValue)
return acc;
}, []);
setAnswers(answerArr)

Answer 2

当你这样做时，看起来你试图连续几次设置answer(这将改变答案(：

Object.keys(questionData).forEach(key => {
console.log(key, questionData[key]);
setAnwsers(key, questionData[key])        
});

相反，我会尝试创建一个单独的数组，然后设置该数组的答案

const answerArray = []
Object.keys(questionData).forEach(key => {
console.log(key, questionData[key]);
answerArray.push(questionData[key]);    
});
setAnswers(answerArray)

Answer 3

证明这两段代码都有效(多亏了@chris bradshaw和@radicroppip。问题是我忘记了每次更改都会更改useEffect。所以触发了useEffect，获取数据，这就是触发了一个更改，运行了useEffect，获取了更多数据，并触发了另一个更改等。无限。