如何使用 map 函数显示对象数据数组？答案

【问题标题】：How do I show arrays of object data using map function?如何使用 map 函数显示对象数据数组？
【发布时间】：2021-11-09 22:38:14
【问题描述】：

我是 React 原生概念的新手。我收到此错误：

undefined 不是函数（'...section.content.map...' 附近）

这是我的数组，我正在使用手风琴显示以下数据：

import React from 'react';
import {
  View,
  Text,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import {useState} from 'react';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
    
    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',
        },
      },
    ]
    
    const App = () => {
    
      const [activeSections, setActiveSections] = useState([]);
    
      // Collapsed condition for the single collapsible
    
      const [collapsed, setCollapsed] = useState(true);
    
      const setSections = sections => {
        //setting up a active section state
    
        setActiveSections(sections.includes(undefined) ? [] : sections);
      };
    
    
      const renderHeader = (section, _, isActive) => {
        //Accordion Header view
       
     return (
          <View
            duration={400}
            style={[styles.header, isActive ? styles.active : styles.inactive]}
            transition="backgroundColor">
            <Text style={styles.headerText}>{section.title}</Text>
          </View>
        );
      };
    
      const renderContent = (section, _, isActive) => {
       
     //Accordion Content view
    
        return (
    
          <View
            duration={400}
            style={[styles.content, isActive ? styles.active : styles.inactive]}
            transition="backgroundColor">
            {/* {section.content.map((item, index) => {
              // console.log('item >> ', item);
              return (
                <Text
                  key={i}
                  animation={isActive ? 'bounceIn' : undefined}
                  style={{
                    textAlign: 'center',
                    borderColor: 'grey',
                    borderWidth: 1,
                    padding: 15,
                  }}>
                  {item}
                </Text>
              );
            })} */}
            <View style={{padding: 15}}>
              <Text>Reg.No/I.A No - {section.content.RegNo}</Text>
              <Text>Particular - {section.content.Particular}</Text>
              <Text>Remark - {section.content.Remark}</Text>
              <Text>Filed By - {section.content.FiledBy}</Text>
              <Text>FilingDate - {section.content.FilingDate}</Text>
              <Text>Sr No - {section.content.SrNo}</Text>
              <Text>Status - {section.content.Status}</Text>
              <Text>Enter On - {section.content.EnterOn}</Text>
            </View>
          </View>
        );
      };
    
    
      return (
    
        <SafeAreaView style={{flex: 1}}>
          <View style={styles.container}>
            <ScrollView>
              {/*Code for Accordion/Expandable List starts here*/}
              <Text
                style={{
                  textAlign: 'center',
                  fontWeight: 'bold',
                  fontSize: 16,
                  textDecorationLine: 'underline',
                }}>
                INTERLOCUTARY APPLICATION(s)
              </Text>
              <View style={{margin: 8}}>
                <Accordion
                  activeSections={activeSections}
                  sections={INTERLOCUTARY}
                  touchableComponent={TouchableOpacity}
                  renderHeader={renderHeader}
                  //Header Component(View) to render
                  renderContent={renderContent}
                  //Content Component(View) to render
                  duration={400}
                  onChange={setSections}
                  style={{borderWidth: 1}}
                />
              </View>
            </ScrollView>
          </View>
        </SafeAreaView>
      );
    };

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

要遍历一个对象，您可以使用 Object.entries

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',
    },
  }
];

Object.entries(INTERLOCUTARY[0].content).map(item => { console. log(item) })

或者更方便的使用lodasheach

【讨论】：