如何在 React-Native Flatlist 中有條件地呈現這些項目

Question

我得到一個看起來像這樣的 json object：

Array [
  Object {
    "department": "department 1",
    "formName": "form 1",
    "id": 1,
  },
  Object {
    "department": "department 1",
    "formName": "form 2",
    "id": 2,
  },
  Object {
    "department": "deparment 1",
    "formName": "form 3",
    "id": 3,
  },
  Object {
    "department": "department 1",
    "formName": "form 4",
    "id": 4,
  },
  Object {
    "department": "department 2",
    "formName": "form 5",
    "id": 5,
  },

]

如您所見，只有 2 個獨特的部門，但有 5 個不同的 forms。 forms 的 4 個屬於部門 1，其余形式屬於部門 2

我正在嘗試渲染 2 個看起來像這樣的按鈕：

部門 1

• 表格 1
• 表格 2
• 表格 3
• 表格 4

部門 2

• 表格 5

這是我目前擁有的平面列表組件

    <FlatList
      data={this.state.dataList}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => {
        return (
          <TouchableWithoutFeedback
            onPress={console.log("touched")}
            style={styles.clearBtn}
          >
            <Text style={styles.clearBtnText}>{item.department}</Text>
            <Text style={styles.clearBtnText2}>{item.formName}</Text>
          </TouchableWithoutFeedback>
        );
      }}
    />

但是，這顯然會呈現 5 個如下所示的按鈕：

部門 1

• 表格 1

部門 1

• 表格 2

部門 1

• 表格 3

部門 1

• 表格 4

部門 2

• 表格 5

Answer 1

您可能想要重塑您的數據並使用SectionList而不是FlatList ，它看起來更適合您的用例。

官方文檔在這里，如果我們通過他們的示例 go 您的數據應該類似於：

[
   {
     title: 'Department 1',
     data: [{formName: 'form1', id: 1} ,{formName: 'form2', id:2} ...]
   },
   {
     title: 'Department 2',
     data: [{formName: 'form5', id: 5}]
   }  
]

你的SectionList渲染看起來像

<SectionList
      sections={this.state.dataList}
      keyExtractor={(item) => item.id.toString()}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={/*Whatever style you want*/}>{title}</Text>
      )}
      renderItem={({ item }) => {
        return (
          <TouchableWithoutFeedback
            onPress={() => console.log("touched")}
            style={styles.clearBtn}
          >
            <Text style={styles.clearBtnText2}>{item.formName}</Text>
          </TouchableWithoutFeedback>
        );
      }}
    />

假設this.state.dataList是我提出的數據 model

Answer 2

正如@Ron B. 建議的那樣，您需要將數據從平面轉換為部分數組結構，如下所示。

const flatToSection = (data)=>{
  const getDepartmentData = (department,data)=>{
return data.filter(item=> item.department === department)
}
const departments =[...new Set( data.map(el=> el.department))]

const sections = departments.map((department)=>({
 title:department,
 data :getDepartmentData(department,data)

}))

return sections

}

export default flatToSection

然后將 FlatList 替換為 Section 列表。

工作示例 - https://snack.expo.dev/@emmbyiringiro/c8a7cd