将数据从JSON加载到react-native-table-component

Question

我使用native-table-component https://github.com/Gil2015/react-native-table-component将数据显示到表中

这是我的数据：

1: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:49", XPOINT: 53.963928, YPOINT: 32.24068, POSDESCRIPTION: "ايران: يزد: ميبد", …}
2: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:44", XPOINT: 53.963928, YPOINT: 32.24068, POSDESCRIPTION: "ايران: يزد: ميبد", …}
3: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:39", XPOINT: 53.963928, YPOINT: 32.24068, POSDESCRIPTION: "ايران: يزد: ميبد", …}
4: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:34", XPOINT: 53.99361, YPOINT: 32.191703, POSDESCRIPTION: "ايران: استان يزد - محور ميبد به ندوشن - 5 كيلومتر از  ميبد", …}
5: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:29", XPOINT: 54.060798, YPOINT: 32.139923, POSDESCRIPTION: "ايران: يزد: ميبد، به سمت جنوب شرقی، 11 کیلومتر", …}
6: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:24", XPOINT: 54.117355, YPOINT: 32.106632, POSDESCRIPTION: "ايران: استان يزد - محور يزد به اردكان - 32 كيلومتر از  يزد", …}
7: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:19", XPOINT: 54.183261, YPOINT: 32.06414, POSDESCRIPTION: "ايران: استان يزد - محور يزد به اردكان - 25 كيلومتر از  يزد", …}
8: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:14", XPOINT: 54.217983, YPOINT: 32.017246, POSDESCRIPTION: "ايران: استان يزد - اشگذر", …}
9: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:09", XPOINT: 54.262409, YPOINT: 31.98723, POSDESCRIPTION: "ايران: استان يزد - زارچ", …}
10: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "12:04", XPOINT: 54.25148, YPOINT: 31.927099, POSDESCRIPTION: "ايران: استان يزد - محور كمربندي يزد به كمربندي يزد - 5 كيلومتر از  كمربندي يزد", …}
11: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "11:59", XPOINT: 54.28656, YPOINT: 31.859197, POSDESCRIPTION: "ايران: استان يزد - محور كمربندي يزد به كمربندي يزد - 13 كيلومتر از  كمربندي يزد", …}
12: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "11:54", XPOINT: 54.34906, YPOINT: 31.814886, POSDESCRIPTION: "ايران: استان يزد - محور كمربندي يزد به كمربندي يزد - 19 كيلومتر از  كمربندي يزد", …}
13: {NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "11:49", XPOINT: 54.410926, YPOINT: 31.766222, POSDESCRIPTION: "ايران: استان يزد - محور كمربندي يزد به كمربندي يزد - 27 كيلومتر از  كمربندي يزد", …}

这是我的桌子：

<View style={styles.tablecontainer}>
        <ScrollView horizontal={true}>
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <Row data={this.state.tableHead} widthArr={this.state.widthArr} style={styles.header} textStyle={styles.text}/>
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {
                  this.props.data?this.props.data.map((data,index) => (
                    <Row
                       key={index}
                       data={data} 
                       widthArr={this.state.widthArr}
                       style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                    />
                  )) : []
                  // tableData.map((rowData, index) => (
                  //   <Row
                  //     key={index}
                  //     data={rowData}
                  //     widthArr={this.state.widthArr}
                  //     style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                  //     textStyle={styles.text}
                  //   />
                  // ))
                }
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
      </View>

这是我的状态：

function mapStateToProps(state) {

  return {
    data: state.GetTraceHardware.data,
    isLoading: state.GetTraceHardware.isLoading,
    error: state.GetTraceHardware.error
  }
}
function mapDispatchToProps(dispatch) {
  return {
    getTraceOfHardware: (data) => dispatch(getTraceOfHardware(data))
  }

}

但是运行我的应用程序时出现此错误：“ data.map不是函数”

该如何解决？ 感谢您的帮助

更新：

我更改代码会得到一个新错误：

  tableData.map((rowData, index) => (
                    <Row
                      key={this.props.data?this.props.data.:[]}
                      data={this.props.data?this.props.data:[]}
                      widthArr={this.state.widthArr}
                      style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                      textStyle={styles.text}
                    />
                  ))

我得到错误信息：

Invariant Violation: Objects are not valid as a React child (found: object with keys {NICKNAME, SENTDATE, XPOINT, YPOINT, POSDESCRIPTION, SPEED, TRUCKSTATE, MESSAGETIME, SIGNATURE, DIRECTION, MOVINGSTATE}). If you meant to render a collection of children, use an array instead.