ReactTable渲染Firebase数据报错：元素类型无效，求代码修正

这个Error: element type is invalid expected a string...报错主要是几个核心问题导致的，我帮你逐一梳理并修复：

问题分析 #

• ReactTable不兼容React Native：你用的react-table是专门为React Web开发的组件，React Native环境不支持直接使用它，得换成适配RN的表格组件，比如react-native-table-component。
• 错误的DOM元素：React Native里没有<div>标签，要换成RN的<View>组件。
• Firebase快照处理错误：你在forEach里定义的变量是childSnapShot，但调用的是child.val()，这里变量名写错了，应该是childSnapShot.val()。
• 状态更新逻辑冗余：Firebase的value事件会返回整个users节点的完整快照，每次触发时你不需要把旧数据和新数据合并，直接替换状态里的data即可，否则会导致数据重复。

修复步骤&完整代码 #

1. 先安装适配RN的表格组件：

npm install react-native-table-component --save
# 或者用yarn
yarn add react-native-table-component

2. 修正后的完整代码：

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

const firebaseConfig = {
  apiKey: "XXXXX",
  authDomain: "XXXXX",
  databaseURL: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXX",
  measurementId: "XXXX"
};

// 避免重复初始化Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default class Form1 extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      data: [],
      tableHead: ['Email', 'Password'] // 表头
    }
  }

  componentDidMount() {
    firebase.database().ref('users').on('value', snapshot => {
      const data = [];
      snapshot.forEach((childSnapShot) => {
        // 修正变量名，正确获取子节点数据
        const userData = childSnapShot.val();
        data.push([userData.email, userData.password]);
      });
      // 直接替换数据，避免重复
      this.setState({ data });
      console.log(this.state.data);
    });
  }

  render() {
    const { tableHead, data } = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 1, borderColor: '#c8e1ff'}}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={data} 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,
    textAlign: 'center'
  }
});

额外说明 #

• 我加了if (!firebase.apps.length)来避免重复初始化Firebase的问题，如果你在其他地方已经初始化过，这一步能防止报错。
• react-native-table-component的用法比较简洁，表头用<Row>，数据行用<Rows>，你可以根据需求调整样式。
• 如果之后需要更复杂的表格功能（比如排序、筛选），可以考虑react-native-data-table或者@react-native-community/tableview这类组件。

内容的提问来源于stack exchange，提问作者developer_user