如何以这种格式的数据在本机反应中制作多维数组：[[]，[]，[]]？答案

【问题标题】：How to make a multi dimensional array in react native in this format data: [[],[],[]]?如何以这种格式的数据在本机反应中制作多维数组：[[]，[]，[]]？
【发布时间】：2019-09-04 16:31:51
【问题描述】：

我在我的项目中使用 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);
    });

【问题讨论】：

标签： arrays firebase react-native firebase-realtime-database

【解决方案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]);           
          })

【讨论】：

我在问题中添加了更多细节。
你的行是由三元组[name,amount,frequency]组成的吗？
是的。 tableData: [ [name,amount,frequency], [name,amount,frequency] ] 根据可用费用的多少，将从数据库中获取所有数据。
我编辑了我的帖子，尝试用我的替换你的 forEach 正文
我试过了，效果很好。只是做了一些编辑。谢谢。

【解决方案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

【讨论】：