如何在React Native中按字段值展示API返回的数据

步骤1：预处理接口响应数据 #

首先判断接口返回的status_code是否为100确认请求成功，再把零散的分段字段转换为便于遍历的数组结构，无需硬编码4个Section的字段名，后续接口新增分段也不用修改渲染逻辑。参考代码如下：

// apiResponse为接口返回的原始JSON对象
const processApiData = (apiResponse) => {
  if (apiResponse.status_code !== '100') return []
  const sectionList = []
  // 自动匹配所有SectionX_name格式的字段
  Object.keys(apiResponse).forEach(key => {
    if (key.startsWith('Section') && key.endsWith('_name')) {
      const sectionNum = key.match(/Section(\d+)_name/)[1]
      sectionList.push({
        id: sectionNum,
        name: apiResponse[key],
        count: apiResponse[`Section${sectionNum}_count`]
      })
    }
  })
  // 按Section序号排序，避免接口字段顺序错乱导致渲染顺序不对
  return sectionList.sort((a, b) => Number(a.id) - Number(b.id))
}

步骤2：封装单分段展示组件 #

封装可复用的分段展示组件，仅需接收name、count两个入参，样式可根据业务需求调整：

import { View, Text, StyleSheet } from 'react-native'

const SectionItem = ({ name, count }) => {
  return (
    <View style={styles.sectionCard}>
      <Text style={styles.sectionName}>{name}</Text>
      <Text style={styles.sectionCount}>{count}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  sectionCard: {
    padding: 16,
    marginVertical: 8,
    marginHorizontal: 16,
    backgroundColor: '#fff',
    borderRadius: 8
  },
  sectionName: {
    fontSize: 16,
    color: '#333'
  },
  sectionCount: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#222',
    marginTop: 4
  }
})

export default SectionItem

步骤3：页面渲染 #

在页面组件中请求接口、处理数据后直接遍历渲染即可，推荐用FlatList保证长列表性能，也可以直接用map遍历：

import { useState, useEffect } from 'react'
import { View, FlatList, ActivityIndicator, Text } from 'react-native'
import SectionItem from './SectionItem'

const DashboardPage = () => {
  const [dataList, setDataList] = useState([])
  const [loading, setLoading] = useState(true)
  const [errorMsg, setErrorMsg] = useState('')

  useEffect(() => {
    // 替换为你自己的接口请求方法
    requestDashboardApi().then(res => {
      const processedData = processApiData(res)
      setDataList(processedData)
      setLoading(false)
    }).catch(err => {
      setErrorMsg('数据加载失败')
      setLoading(false)
    })
  }, [])

  // 加载态展示
  if (loading) return <ActivityIndicator size="large" style={{ marginTop: 32 }} />
  // 错误态展示
  if (errorMsg) return <Text style={{ textAlign: 'center', marginTop: 32 }}>{errorMsg}</Text>

  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
      <FlatList
        data={dataList}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <SectionItem name={item.name} count={item.count} />}
        contentContainerStyle={{ paddingVertical: 16 }}
      />
    </View>
  )
}

可选优化点 #

• 可以给SectionItem新增图标、点击跳转逻辑，适配不同业务需求
• 可以加空状态处理，当处理后的数组为空时展示对应提示

内容的提问来源于stack exchange，提问作者Waqas