渲染对象数组的对象 ReactJs [已解决]

Question

我是来自多个 firestore 集合的对象数组，并将它们全部存储在一个对象中。我想渲染数组中的单个对象就是对象。这就是我获取数据的方式：

  const categories = {
    Pakoras: [],
    Vegitarisches: [],
    "Biryani Gerichte": [],
    Hähnchengerichte: [],
    "Indische Beilagen": [],
    Lammgerichte: [],
    "Ben & Jerrys": [],
    Getränke: [],
    Pizza: [],
    Kindermenüs: [],
    Spaghetti: [],
    Tortellini: [],
    Gnochi: [],
    Maccheroni: [],
    Tagliatelle: [],
    "Überbackene Nudeln": [],
    Salate: [],
    Fleischgerichte: [],
    "Schnitzel & Fleischgerichte": [],
    Risotto: [],
    "Überbackenes-Gemüse-Kartoffeln": [],
    "Chinesische-Gerichte-Gebratene-Nudeln-Reis": [],
  }
   const [foods, setFoods] = useState(categories)
  useEffect(() => {
    fetch()
  }, [])
  function fetch(){
      console.log("Fetching")
      Object.keys(categories).forEach(category => {
        fire.firestore().collection(category).get()
          .then(snapshot => {
            var food = []
            snapshot.forEach(doc => {
              food.push(doc.data())
              //console.log(doc.data())
            })
            categories[category] = food;
          }).catch(error => {
            console.log(error)
          })
      })
      //console.log(foods)
    }

一个 doc.data() 对象看起来像这样：

    var example = {
        title: "example",
        price: 10,
        desc: "none"
    }

对象位于相应类别下的数组中。我该如何渲染这个？我想遍历所有内容并像这样渲染它：

类别 1：

• 标题 - 价格 - 描述
• 标题 - 价格 - 描述

类别2：

• 标题 - 价格 - 描述
• 标题 - 价格 - 描述

Answer 1

Object.entries(categories) 将允许您从对象中迭代一组键/值对。

在您的情况下，key 将是 类别，value 将是该类别中的食物数组。

Object.entries(categories).map(([category, foods]) => {
  return (
    <div key={category}>
      <h1>{category}</h1>
      <ul>
        { foods.map(food => (
            <li key={food.title}>
               {food.title} - {food.price} - {food.desc}
            </li>
        )}
      </ul>
    </div>
  )
})