javascript - React Native Table 动态打印或 React Native 中的重复元素打印

Question

• 你好。开发人员我正在做这样的条件，我想要 head1 和 tableData value1 但我在某个地方出错了所以输出没有出现请帮助我在哪里出错

我的代码：

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Table, Row, Rows} from 'react-native-table-component';
export  default class TableReactNative extends Component {
    state={
        tableHead : ['Head1', 'Head2', 'Head3', 'Head4','Head5','Head6','Head7', 'Head8'],
        tableData :[[
            '1', '2', '3', '4','1', '2', '3', '4'],[
            '1', '2', '3', '4','1', '2', '3', '4']],
        rowData:[],
    }
    componentDidMount(){
       this.setTable();
    }
    setTable(){
        var table=[];
        for(let i=0;i<this.state.tableData.length;i++){

               var tabHead=this.state.tableHead[i];
               var tabData=this.state.tableData[i];

           var val= <View><Table><Row data={tabHead} /><Rows data={tabData} /></Table></View>;

           table.push(val);
        }

        this.setState({rowData:table})
    }
    render() {
        return (
            <View>
                {this.state.rowData}
            </View>
        )
    }
}

预期的o / p：

 Head1  Head2   Head3  ...                                           
    1       2       3     ...
 Head1  Head2   Head3  ...                                           
    1       2       3     ...
 Head1  Head2   Head3  ...                                           
    1       2       3     ...

1. 这意味着标题相同，但列数据在此处更改 tabledata 两个数组，所以我想用一列制作一个标题，因为在我的真实移动应用程序中大量数据我想为每个具有相同标题的数据制作动态表。

Answer 1

你可以试试这段代码。

import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Table,  Row,  Rows} from 'react-native-table-component';
const {width, height} = Dimensions.get('window');

export  default class TableReactNative extends Component {

  constructor(props) { 
    super(props); 
    this.state = { 
    tableHead: ['Head1', 'Head2', 'Head3'],
     tableData: [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9']
    ]
  }
}

renderTable(){
 return this.state.tableData.map((tableDataRow)=>{
   return(
     <View key={tableDataRow[0]}>
       <Table>
         <Row data={this.state.tableHead}/>
         <Row data={tableDataRow}/>
       </Table>
     </View>
   )
 })
}

render() {
  return (
    <View style={{width: width, height:height }}>
      {this.renderTable()}
    </View>
  )
 }
}