將本機數組反應到節列表

Question

我正在嘗試將一些數據格式化為我的反應本機應用程序上的 SectionList，但我遇到了一些讓它工作的問題。 本質上，我有一個與他們的 recipeId 和一些其他信息相關的成分列表。 我正在使用 lodash 根據 recipeName 將數據排序到 arrays 中，結果如下所示：

Object {
  "Blueberry Chaffles": Array [
    Object {
      "ingredient": "1/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
      "recipeId": 749,
      "recipeName": "Blueberry Chaffles",
      "uniqueId": "7491/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
    },
  ],
  "Everything Chaffle with Cream Cheese and Salmon": Array [
    Object {
      "ingredient": "CHAFFLES",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "750CHAFFLES",
    },
    Object {
      "ingredient": "1 Egg",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7501 Egg",
    },
    Object {
      "ingredient": "2 Tsp Everything Bagel Seasoning",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7502 Tsp Everything Bagel Seasoning",
    },
    Object {
      "ingredient": "REMAINING INGREDIENTS",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "750REMAINING INGREDIENTS",
    },
    Object {
      "ingredient": "2 Oz Smoked Salmon",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7502 Oz Smoked Salmon",
    },
  ],
}

這是 lodash output 的：

let array = _.groupBy(recipesFav, o => o.recipeName)

我現在遇到的問題是嘗試在 sectionList 中顯示這些數據。 我已經按照反應網站上的文檔進行操作，但似乎沒有任何效果。 本質上，我希望能夠將配方名稱顯示為部分列表標題，並在其下方顯示與該配方相對應的成分。 任何幫助將不勝感激！

編輯：當前 SectionList 代碼不起作用：

<SectionList
                    sections={this.state.shopping_list}
                    keyExtractor={(item, index) => item + index}
                    renderItem={({ item }) => <Item title={recipeName} />}
                    renderSectionHeader={({ section: { recipeName } }) => (
                        <Text>{recipeName}</Text>
                    )}
                />

Answer 1

每個部分都應組織為數組中的鍵值對，例如

Data = [
{
    Title: "Blueberry Chaffles",
    Info: [
        {
            "ingredient": "1/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
            "recipeId": 749,
            "recipeName": "Blueberry Chaffles",
            "uniqueId": "7491/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
        },
    ]
},
{
    Title: "Everything Chaffle with Cream Cheese and Salmon",
    Info: [
        {
            "ingredient": "CHAFFLES",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "750CHAFFLES",
        },
        {
            "ingredient": "1 Egg",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7501 Egg",
        },
        {
            "ingredient": "2 Tsp Everything Bagel Seasoning",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7502 Tsp Everything Bagel Seasoning",
        },
        {
            "ingredient": "REMAINING INGREDIENTS",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "750REMAINING INGREDIENTS",
        },
        {
            "ingredient": "2 Oz Smoked Salmon",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7502 Oz Smoked Salmon",
        },
    ],
}

];

Answer 2

你可以試試這個。

// Object.keys 用於迭代 object 鍵，您可以使用它形成一個數組。

常量 section_list_data = Object.keys(response_object).map(key => ({ title: key, data: response_object[key] }));