我有一個嵌套陣列，在一個集合的各個專案中。
{
"id"。"RpFRcKLIgELlBLgIOJM4"/span>,
"Category": "",
"方法": "",
"用戶": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3"/span>。
"食品": [
{
"重量": 1.065,
"標簽": "牛奶-長壽（1升）（1.065）"。
"value": "牛奶-長壽(1升)".
},
{
"標簽": "藍莓（0.125）",
"value": "Blueberries",
"重量": 0.125。
}
],
"Name": "456",
"服務": "".
}
{
"id": "WQ6KBLevFsCdV73j4KU4"/span>,
"Category": "",
"Name": "123",
"食品": [
{
"value": "Wine-White",
"標簽": "Wine-White", "標簽": "Wine-White"
},
{
"value": "牛奶-長壽（1Litre）",
"標簽": "牛奶-長壽（1升）", "標簽": "牛奶-長壽（1升）".
}
],
"Serves": "",
"用戶": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3"/span>。
"方法"。""。
}
const useItemsMeals=（/span>）=> {
const user = firebase.auth().currentUser;
const user1 = user.uid;
const [items, setItems] = useState([]); //useState()鉤，設定初始狀態為一個空陣列。
useEffect(() => {
const unsubscribe = firebase
.firestore()
.collection("dining")
.where("user", "==", user1)
.orderBy("Category"/span>, "asc")
.onSnapshot(snapshot => {
const listItemsMeals = snapshot.docs.map(doc => ({
id: doc.id。
...doc.data()
}));
setItems（listItemsMeals）。
console.log（listItemsMeals）。
});
return () => unsubscribe() 。
}, []);
return items。
};
我在嘗試顯示'Foods'陣列中的專案時遇到了困難，我目前使用的回傳方式是：
我在嘗試顯示'Foods'陣列中的專案。
const listItemMeals = useItemsMeals();
{listItemMeals.map(item => (
<TableRow hover key={item. id} id={item.id} >
<TableCell>{item.Category}</TableCell>
<TableCell>/span>{item.Name}</TableCell>/span>
<TableCell>{item.Foods}</TableCell>
當這樣做的時候，它告訴我：
錯誤。物件作為React的一個子節點是無效的（發現：有鍵{label, value}的物件）。如果你想渲染一個子集，請使用一個陣列。
我想我需要以某種方式再次映射這個嵌套的陣列--但是對于我來說--無法弄清楚！
uj5u.com熱心網友回復：
你快到了。
你的useItemsMeals函式從Firestore加載資料，并將其正確地設定到狀態中的items變數中以呈現它。但是你在渲染代碼中使用const listItemMeals = useItemsMeals()，這就把事情搞亂了。
你不應該嘗試從useItemsMeals中回傳任何值，而應該僅僅依靠狀態中的items變數來在資料庫和渲染的之間傳遞資訊。
所以：
// return items;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/325757.html
標籤：