Функция обратного вызова get config для компонента div должна быть функцией (полученной как undefined). Убедитесь, что имена компонентов начинаются с заглавной буквы

Question

Ошибка: Инвариантное Нарушение: просмотр конфигурации обратного вызова получателя для компонента 'div' должен быть функцией (получен 'undefined'). Убедитесь, что имена компонентов начинаются с заглавной буквы. Я получаю эту ошибку при попытке извлечь данные из firebase в компонент таблицы в native реагировать, который является ReactTable, а также дает пустой массив в консоли при просмотре данных в моей консоли и, следовательно, ничего не появляется в выводе.

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 = [];
    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,
            }
            data.push(singleObj);

            if (index === snapshot.length - 1) {
                this.setState({ data: data });
            }
        });
    });
}

render() {
    return (
        <div>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </div>
    );
}
}

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

Answer 1

Вы не можете использовать div в реакции native изменить его с помощью div change

      <div>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </div>

на

        <View>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </View>

Надеюсь, это поможет!