如何在React Native中结合JSON数据创建带标题的表格？

1. 数据预处理 #

先将tableInfo按parent_id分组，再与tableTitle关联，方便后续按组渲染：

// 格式化数据，关联标题与对应子项
const formatTableData = (titles, info) => {
  // 按parent_id分组子项数据
  const groupedInfo = info.reduce((acc, item) => {
    if (!acc[item.parent_id]) acc[item.parent_id] = [];
    acc[item.parent_id].push(item);
    return acc;
  }, {});

  // 绑定标题与对应分组数据
  return titles.map(title => ({
    ...title,
    items: groupedInfo[title.id] || []
  }));
};

2. 完整组件实现 #

结合你的接口请求逻辑，实现可渲染的分组表格：

import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import axios from 'axios';

const GroupedTable = ({ id }) => {
  const [titleData, setTitleData] = useState([]);
  
  // 子项数据（若来自接口，可替换为axios请求）
  const tableInfo = [ 
    { id: '1', parent_id: '11', name: 'toyota', model:'camry', year:'2020', country:'japan'},
    { id: '2', parent_id: '11', name: 'huyndai', model:'accent', year:'2018', country:'s.korea'},
    { id: '3', parent_id: '11', name: 'tesla', model:'s30', year:'2022', country:'usa'},
    { id: '4', parent_id: '12', name: 'iphone', model:'14 pro', year:'2020', country:'usa'},
    { id: '5', parent_id: '12', name: 'samsung', model:'ss22', year:'2018', country:'s.korea'},
    { id: '6', parent_id: '12', name: 'pixel', model:'4', year:'2022', country:'usa'},
  ];

  // 请求标题数据
  useEffect(()=>{
    const config = {
      method:'get',
      url: `http://URL.COM/${id}`,
      headers: {  }
    }
    axios(config)
     .then(function(response){
      let newArray = response.data.map((list)=>{
        return {id: list.id, last_nom: list.name} // 映射为与本地数据一致的字段名
      })
        setTitleData(newArray)
     })
     .catch(function (error) {
      console.log(error);
     })
  }, [id])

  // 格式化后的数据
  const formattedData = formatTableData(titleData, tableInfo);

  return (
    <ScrollView style={styles.container}>
      {formattedData.map(group => (
        <View key={group.id} style={styles.groupContainer}>
          {/* 分组标题栏 */}
          <View style={styles.titleRow}>
            <Text style={styles.titleText}>{group.last_nom}</Text>
          </View>
          {/* 表头 */}
          <View style={styles.headerRow}>
            <Text style={styles.headerCell}>Name</Text>
            <Text style={styles.headerCell}>Model</Text>
            <Text style={styles.headerCell}>Year</Text>
            <Text style={styles.headerCell}>Country</Text>
          </View>
          {/* 数据行 */}
          {group.items.map(item => (
            <View key={item.id} style={styles.dataRow}>
              <Text style={styles.dataCell}>{item.name}</Text>
              <Text style={styles.dataCell}>{item.model}</Text>
              <Text style={styles.dataCell}>{item.year}</Text>
              <Text style={styles.dataCell}>{item.country}</Text>
            </View>
          ))}
        </View>
      ))}
    </ScrollView>
  );
};

// 表格样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
  },
  groupContainer: {
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
  },
  titleRow: {
    backgroundColor: '#f0f0f0',
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
  titleText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  headerRow: {
    flexDirection: 'row',
    backgroundColor: '#e0e0e0',
    paddingVertical: 8,
  },
  headerCell: {
    flex: 1,
    textAlign: 'center',
    fontWeight: '600',
  },
  dataRow: {
    flexDirection: 'row',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  dataCell: {
    flex: 1,
    textAlign: 'center',
  },
});

export default GroupedTable;

3. 关键注意点 #

• 接口请求标题时，需将返回的name字段映射为last_nom，确保与本地数据字段一致，否则无法关联子项。
• 采用flex:1均分单元格宽度，保证表格布局整齐；外层用ScrollView处理长内容滚动。
• 若tableInfo也来自接口，可复制标题请求的逻辑，将数据替换为接口返回值。

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