如何使用map函数渲染对象数组，解决section.content.map报错问题

• map()是数组专属的遍历方法，你代码中INTERLOCUTARY数组每一项的content字段是普通对象，不存在map方法，直接调用就会触发该报错。
• 你注释的代码中还有一处小问题：map的第二个参数命名是index，但是key属性写的是未定义的i，就算map能运行也会报错。

方案1：调整content结构为数组（适合content可能有多条数据的场景） #

如果后续你每个accordion条目下可能要展示多条content数据，直接把content字段改为数组格式即可：

const INTERLOCUTARY = [
  {
    title: 'INTERlOCUTARY Application(s)',
    // 把对象包裹在数组里
    content: [
      {
        RegNo: '784/2020',
        Particular: 'EXEMPTION FROM FILING O.T',
        Remark: '-',
        FiledBy: 'PRATIBHA JAIN',
        FilingDate: '03-01-2020',
        SrNo: '1',
        Status: 'P',
        EnterOn: '03-01-2020 15:12:42',
      }
    ],
  },
]

修改renderContent里的渲染逻辑即可：

const renderContent = (section, _, isActive) => {
  return (
    <View
      duration={400}
      style={[styles.content, isActive ? styles.active : styles.inactive]}
      transition="backgroundColor">
      {section.content.map((item, index) => {
        return (
          <View key={index} style={{padding: 15}}>
            <Text>Reg.No/I.A No - {item.RegNo}</Text>
            <Text>Particular - {item.Particular}</Text>
            <Text>Remark - {item.Remark}</Text>
            <Text>Filed By - {item.FiledBy}</Text>
            <Text>FilingDate - {item.FilingDate}</Text>
            <Text>Sr No - {item.SrNo}</Text>
            <Text>Status - {item.Status}</Text>
            <Text>Enter On - {item.EnterOn}</Text>
          </View>
        );
      })}
    </View>
  );
};

方案2：不修改原有数据结构，用对象遍历方法渲染（适合content固定只有1条数据的场景） #

如果你的content永远只有一条数据，可以用Object.entries()把对象转为键值对数组再遍历，不用硬编码每个字段，后续新增字段也不用修改渲染逻辑：

const renderContent = (section, _, isActive) => {
  // 字段名映射，可根据需求自定义显示文本
  const fieldNameMap = {
    RegNo: 'Reg.No/I.A No',
    Particular: '案件内容',
    Remark: '备注',
    FiledBy: '提交人',
    FilingDate: '提交日期',
    SrNo: '序号',
    Status: '状态',
    EnterOn: '录入时间'
  }
  return (
    <View
      duration={400}
      style={[styles.content, isActive ? styles.active : styles.inactive]}
      transition="backgroundColor">
      <View style={{padding: 15}}>
        {Object.entries(section.content).map(([key, value], index) => (
          <Text 
            key={index}
            animation={isActive ? 'bounceIn' : undefined}
            style={{marginVertical: 3}}
          >
            {fieldNameMap[key] || key} - {value}
          </Text>
        ))}
      </View>
    </View>
  );
};

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