[英]Display Firestore Data with a datatype of map: Error: Objects are not valid as a React child
Retrieving from firestore:从 Firestore 中检索:
const [product, setProduct] = useState([]);
const getProducts = async () => {
const querySnapshot = await getDocs(collection(db, "products"));
const arr = [];
querySnapshot.forEach((doc) => {
arr.push({
...doc.data(),
id: doc.id,
});
});
setProduct(arr);
};
useEffect(() => {
getProducts();
}, []);
I have this colorMap
retrieved from Firestore:我从 Firestore 中检索了这个
colorMap
:
export const data = [
{
colorMap: { red: 6, blue: 7, green: 8 },
id: "a4TK38mByQbim4TwOHMY"
},
{
colorMap: { Black: 20, Gold: 10 },
id: "m08YmrlFxhxLxyc3hVjT"
},
{
colorMap: { green: 9, red: 19 },
id: "nN2w57SiDovbtQ6EBzGb"
}
];
How can I display it in the screen?我怎样才能在屏幕上显示它?
{product &&
product.map((index) => (
<>
<b>{index.prodName + "-" + index.size + index.cat}</b>
<li>{index.id}</li>
</>
))}
If I'll add this:如果我添加这个:
<li>{index.colorMap}</li>
It will cause an error:它会导致错误:
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {green, red, blue})
Uncaught (in promise) Error: Objects are not valid as a React child (发现: object with keys {green, red, blue})
How do I resolve this?我该如何解决这个问题? Any help would be appreciated.
任何帮助,将不胜感激。 Thank you
谢谢
You can use Object.entries()
and then map those items as shown below:您可以使用
Object.entries()
然后使用 map 这些项目,如下所示:
{product &&
product.map((index) => (
<div>
<b>{index.prodName + "-" + index.size + index.cat}</b>
<p>{index.id}</p>
<ul>
{
Object.entries(index.colorMap).map((color) => (
<li>{color[0]} - {color[1]}</li>
))
}
</ul>
</div>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.