Question

我尝试使用React Native创建二维数组，当我尝试启动此页面时，我收到错误：

undefined不是对象（评估＆＃34; rows.map＆＃34;）

当我解析我的阵列时，也许我有错误，但我不知道究竟什么是不正确的。代码如下：

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

问题是您使用的是this.props.data，这意味着Details组件需要来自props中父组件的数据，并且您没有在道具中传递任何数据，因此this.props.data将会未定义，当您尝试使用map时，它会抛出错误。

由于您在起始时在同一文件中定义了数据，因此data而不是this.props.data可以直接使用该数据。

像这样写：

render() {

    const rows = data;      //here

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

    return(
        ....
    )
}

React Native中的2D数组

1 个答案: