如何在 React-Native Flatlist 中有条件地渲染这些项目答案

【问题标题】：How to conditionally render these items in a React-Native Flatlist如何在 React-Native Flatlist 中有条件地渲染这些项目
【发布时间】：2022-01-09 17:59:22
【问题描述】：

我得到一个如下所示的 json 对象：

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 种不同的形式。其中 4 个表格属于部门 1，其余表格属于部门 2

我正在尝试渲染 2 个看起来像这样的按钮：

部门一

表格 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

部门一

表格 2

部门一

表格 3

部门一

表格 4

部门2

表格 5

【问题讨论】：

标签： javascript react-native expo

【解决方案1】：

您可能想要重塑您的数据并使用SectionList 而不是FlatList，它看起来更适合您的用例。

官方文档是here，如果我们以他们的示例为例，您的数据应该类似于：

[
   {
     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是我提出的数据模型

【讨论】：

【解决方案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

【讨论】：