如何在这种格式数据中生成多维数组：[[]，[]，[]]？

Question

我在我的项目中使用react-native-table-component，接受的数组数据的格式应如下所示：

tableData: [
   ['1', '2', '3',],
   ['a', 'b', 'c',],
   ['1', '2', '3',],
]

我试着推动并映射。但我不知道为什么我不能以这种方式格式化数组。

我试过这段代码：

this.state.tableData.push('1');
this.state.tableData.push('2');
this.state.tableData.push('3');

但似乎数组中的数据格式是这样的：

tableData: [1,2,3]

数据将从我的firebase数据库中获取，如下所示：

firebase.database().ref('Budgets/id/Expenses').once("value", function(snapshot) {
          snapshot.forEach(function(data) {
            this.state.tableData.push(data.val().name);
            this.state.tableData.push(data.val().amount);
            this.state.tableData.push(data.val().frequency);           
          })
}).catch((error) => {
    console.log(error);
});

想出或提出这种阵列格式的想法或建议吗？

解：

let roww = [];
let that = this;
    firebase.database().ref('Budgets/id/Expenses').once("value", function(snapshot) {
      snapshot.forEach(function(data) {
        roww.push([data.val().name,data.val().amount,data.val().frequency]); 
        that.setState({tableData: roww});
      })
    }).catch((error) => {
      console.log(error);
    });

Answer 1

我不完全确定问题是什么..如果接受的格式是双向数组，那么......构建它。

let firstRow = [1,2,3]
this.state.tableData = [firstRow]

推动行动

this.state.tableData[0].push(1)

更多细节会有所帮助

编辑：试试这个（请注意this.state.tableData必须初始化）

          snapshot.forEach(function(data) {
            this.state.tableData.push([data.val().name,data.val().amount,data.val().frequency]);           
          })

Answer 2

这是一个工作的例子。我认为这将有助于解决您的问题。检查componentDidmount（）

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ]
    }
  }
  componentDidMount(){

var myarray=new Array(3)
var k= 1
var j= 2
var l= 9
for (var i=0; i <3; i++)
    myarray[i]=[j,k,l]

  this.setState({tableData:myarray})

  }

  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
})

你也可以在这里测试Expo snack