2D-Array in Reaktion india

Question

Ich habe versucht, 2D-Array zu schaffen, mit Reagieren india und wenn ich versuche, diese Seite zu starten, erhalte ich Fehler:

undefined is not an object (evaluating "rows.map")

Vielleicht Fehler, den ich habe, wenn ich meine Array analysieren, aber ich Ich weiß nicht, was genau nicht stimmt. Code ist unten:

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { View } from 'react-native'; 
import { TopSum, BottomSum, TitleLedger } from '../common/text'; 
import styles from './style 


const data = [{ 
    "date":"Jul 1, 2016", 
    "sum": "$2,577.51", 
    "source": "Earnings", 
    "total": "$0.14" 
},{ 
    "date":"Jul 1, 2016", 
    "sum": "$2,577.51", 
    "source": "Earnings", 
    "total": "$0.14" 
}]; 


export default class Details extends Component { 
    state = {}; 
    render() { 
    const rows = this.props.data; 
    const dataRow = rows.map(row => { 
      return (
       <View style={styles.operation}> 
       <View style={styles.topSum}> 
        <TopSum label={row.date} /> 
        <TopSum label={row.sum} /> 
       </View> 
       <View style={styles.bottomSum}> 
        <BottomSum label={row.source} /> 
        <BottomSum label={row.total} /> 
       </View> 
       </View> 
      ) 
      }) 
    return (    
     <View title="BALANCE" style={styles.content}> 
      {dataRow} 
     </View>  
    ); 
    } 
} 

Answer 1

Ausgabe ist Sie this.props.data verwenden, das bedeutet Details Komponente die Daten aus übergeordneten Komponente in props erwartet und Sie werden keine Daten in Requisiten vorbei so this.props.data wird undefined und es wirft die Fehler, wenn Sie versuchen, map darauf zu verwenden.

Da Sie die Daten in der gleichen Datei im Start definiert, so wird es direkt von data nicht von this.props.data.

schreibt es so:

render() { 

    const rows = data;  //here 

    const dataRow = rows.map(row => { 
     .... 
    } 

    return(
     .... 
    ) 
}