英文:
fetch all values of an array and display in a table
问题
如何显示来自Firestore的数组isReferralAvailable的值。这是我的Google Firestore的视觉表示和我用于提取的代码。我只在如何提取ReferralCodes集合下每个文档的isReferralAvailable值上遇到问题。
这是我的表格行和映射的referralCodes和usedReferralCodes，但由于键是索引，我不知道如何显示它们。这仅显示了具有isReferralAvailable的每个文档的索引1的结果，我想在表行中显示isReferralAvailable数组字段下的所有内容。感谢任何帮助。
英文:
How do I display the values of the array isReferralAvailable from firestore. Here is the visual representation of my google firestore
and here is my code for fetching I only have trouble on how to fetch the values of isReferralAvailable of every document under the collection of ReferralCodes
const [referralCodes, setReferralCodes] = useState([]);
const [usedReferralCodes, setUsedReferralCodes] = useState([]);
useEffect(() => {
onSnapshot(collection(db, "ReferralCodes"), (docsSnap) => {
setReferralCodes(
docsSnap.docs.map((doc) => ({
...doc.data()["isReferralAvailable"],
id: doc.id,
}))
);
setUsedReferralCodes(
docsSnap.docs.map((doc) => ({
...doc.data()["isReferralUsed"],
id: doc.id,
}))
);
});
}, []);
and this is my table row and mapping the referralCodes and usedReferralCodes however I am having trouble since the keys are index and I not know how to display them..
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
{/* mapping the available codes */}
{referralCodes.map((codes) => {
return (
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{codes[1]}{" "}
</td>
);
})}
{/* mapping the used codes */}
{usedReferralCodes.map((usedCodes) => {
return (
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{usedCodes[1]}{" "}
</td>
);
})}
{usedReferralCodes.map((usedCodes) => {
return (
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{usedCodes[1]}{" "}
</td>
);
})}
</tr>
and this results of displaying only the index 1 of every document that have a isReferralAvailable I want to display everything under the array field of isReferralAvailable in table row. I would appreciate any help.
答案1
得分: 2
The map() function in JavaScript takes a callback, which can have the following arguments:
element: 当前在数组中正在处理的元素。
index: 当前在数组中正在处理的元素的索引。
所以在你的情况下，你可以使用 index 来访问数组中的每个元素：
{referralCodes.map((codes, key) => {
return (
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{codes[key]}{" "}
</td>
);
})}
在这里查看更多信息：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
英文:
The map() function in javascript takes a callback, which can have the following arguments:
element: The current element being processed in the array.
index: The index of the current element being processed in the array.
So in your case, what you can do is use the index to access every element in the array:
{referralCodes.map((codes,key) => {
return (
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{codes[key]}{" "}
</td>
);
})}
Check here for more info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论