带有 React 和 Firestore 的嵌套数组 - 如何显示？

Question

我在集合中的各个项目中有一个嵌套数组。

{
"id": "RpFRcKLIgELlBLgIOJM4",
"Category": "",
"Method": "",
"User": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3",
"Foods": [
    {
        "Weight": 1.065,
        "label": "Milk - Long Life (1 Litre) (1.065)",
        "value": "Milk-LongLife(1Litre)"
    },
    {
        "label": "Blueberries (0.125)",
        "value": "Blueberries",
        "Weight": 0.125
    }
],
"Name": "456",
"Serves": ""
}
{
"id": "WQ6KBLevFsCdV73j4KU4",
"Category": "",
"Name": "123",
"Foods": [
    {
        "value": "Wine-White",
        "label": "Wine - White"
    },
    {
        "value": "Milk-LongLife(1Litre)",
        "label": "Milk - Long Life (1 Litre)"
    }
],
"Serves": "",
"User": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3",
"Method": ""
}

const useItemsMeals = () => {
const user = firebase.auth().currentUser;
const user1 = user.uid;
  const [items, setItems] = useState([]); //useState() hook, sets initial state to an empty array
  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("meals")
      .where("User", "==", user1)
      .orderBy("Category", "asc")
      .onSnapshot(snapshot => {
        const listItemsMeals = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setItems(listItemsMeals);
        console.log(listItemsMeals);
      });
    return () => unsubscribe();
  }, []);
  return items;
};

我很难显示“食物”数组中的项目，目前正在用于我的退货：

const listItemMeals = useItemsMeals();
{listItemMeals.map(item => (
      <TableRow hover key={item.id} id={item.id}>
      <TableCell>{item.Category}</TableCell>
      <TableCell>{item.Name}</TableCell>
      <TableCell>{item.Foods}</TableCell>

这样做时它告诉我：

错误：对象作为 React 子对象无效（找到：带有键 {label, value} 的对象）。如果您打算渲染一组子项，请改用数组。

我想我需要以某种方式再次映射这个嵌套数组 - 但对于我的生活 - 无法弄清楚！

Answer 1

你快到了。

您的 useItemsMeals 函数从 Firestore 加载数据，并将其正确设置到状态下的 items 变量中以呈现它。但是你在渲染代码中使用了const listItemMeals = useItemsMeals()，这就搞砸了。

您不应尝试从useItemsMeals 返回任何值，而应仅依靠状态中的items 变量在数据库和渲染之间传递信息。

所以：

// return items; ? remove this
---
// const listItemMeals = useItemsMeals(); ? remove this
---
{items.map(item => ( // ? read items from the state instead

Answer 2

您需要再次循环遍历 Foods 数组。像这样

const listItemMeals = useItemsMeals();
{listItemMeals.map(item => (
      <TableRow hover key={item.id} id={item.id}>
      <TableCell>{item.Category}</TableCell>
      <TableCell>{item.Name}</TableCell>
      {
       item.Foods.map(food=>(
           <div> //this can div or a new row tag
               <TableCell>{food.weight}</TableCell>
               <TableCell>{food.label}</TableCell>
               <TableCell>{food.value}</TableCell>
           </div>))
      }