Question

在控制台中，在render（）之前，this.state.data1.length没有给出任何错误，但是在视图标记中使用它时，它给出的错误如下： TypeError：未定义不是对象（评估'_this.state.data1.length'）如果我从视图标签中删除该行，则反应表标签中不会打印任何内容，因此我认为这行是必需的，但是我应该进行哪些更改，以便使用react native代码不会出错，并且检索到的数据也将打印在我的应用程序中。

import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import ReactTable from 'react-table';
import firebase from 'firebase';

const firebaseConfig = {
...
};
firebase.initializeApp(firebaseConfig);


export default class Form1 extends Component {
constructor(props) {
    super(props);

    this.state = {
        data: [],
        columns: [
            {
                Header: "email",
                accessor: "email"
            },
            {
                Header: "password",
                accessor: "password"
            }
        ]
    }
}

componentDidMount() {
    const data = [];
    const data1 = [];
    var query = firebase.database().ref("/users");
    query.once("value").then((snapshot) => {
      //console.log(snapshot)
        snapshot.forEach((childSnapshot, index) => {

            let singleObj = {
                email: childSnapshot.val().email,
                password: childSnapshot.val().password,
            }

           // console.log('email:',data)
            data.push(singleObj);
           this.setState({data1 : data});
          console.log('sssssssssssssssssss',this.state.data1)
        });
    });
}

submit1=()=>{
console.log(this.state.data1.length)
console.log('data1:',this.state.data1)
}

render() {
    return (
        <View style="styles.container">

            {this.state.data1.length > 0 && <ReactTable data={this.state.data1} columns={this.state.columns} />}
                       <Button title='Submit' onPress={this.submit1.bind(this)} />

        </View>
    );
}
}

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

Answer 1

更改您的代码，如下所示：

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


export default class Form1 extends Component {
constructor(props) {
    super(props);

    this.state = {
        data: [],
        tableHead: ['Emails', 'Password'],
        tableData1:[],
    }
}


componentDidMount() {
    var query = firebase.database().ref("/users");
    query.once("value").then((snapshot) => {
        snapshot.forEach((childSnapshot, index) => {
            let singleObj = {
                email: childSnapshot.val().email,
                password: childSnapshot.val().password,
            }
           this.state.data.push(singleObj);
           this.setState({data: this.state.data});
          console.log('sssssssssssssssssss',this.state.data)
        });
        for (var i = 0; i < this.state.data.length; i++) {
            this.state.tableData1[i] = [this.state.data[i].email, this.state.data[i].password];
            this.setState({ tableData1: this.state.tableData1 });
        }

    });
}

submit1=()=>{
console.log(this.state.data.length)
console.log('data1:',this.state.data)
}

render() {
    return (
        <View style={{flex:1,marginTop:100}}>
        {this.state.data.length > 0 &&   
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
        <Row data={this.state.tableHead} />
        <Rows data={this.state.tableData1} />
        </Table>}
      <Button title='Submit' onPress={this.submit1.bind(this)} />

    </View>
    );
}
}

希望这会有所帮助！

Answer 2

您唯一的问题是，在状态下使用data: []而不是data1: []。但是我发现您的代码中没有更多的增强功能，下面是我的建议

问题：

1）data1在渲染时使用，但未在状态中初始化

2）样式对象用作字符串而不是对象

3）没问题，但是您不需要绑定_submit，因为它已经是一个箭头函数

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import ReactTable from 'react-table';
import firebase from 'firebase';

const firebaseConfig = {};
firebase.initializeApp(firebaseConfig);

const COLUMNS = [
  {
    Header: 'email',
    accessor: 'email',
  },
  {
    Header: 'password',
    accessor: 'password',
  },
];

export default class Form1 extends Component {
  state = {
    data: [],
    columns: COLUMNS,
  };

  componentDidMount() {
    const data = [];
    const query = firebase.database().ref('/users');

    query.once('value').then(snapshot => {
      snapshot.forEach((childSnapshot, index) => {
        const singleObj = {
          email: childSnapshot.val().email,
          password: childSnapshot.val().password,
        };

        data.push(singleObj);
        this.setState({ data });
      });
    });
  }

  _submit = () => {
    console.log('data1:', this.state.data);
  }

  render() {
    const { data, columns } = this.state;

    return (
      <View style={styles.container}>
        {data.length > 0 && <ReactTable data={data} columns={columns} />}
        <Button title="Submit" onPress={this._submit} />
      </View>
    );
  }
}

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

TypeError：undefined不是对象（正在评估..）

2 个答案: