组件“div”的视图配置 getter 回调必须是一个函数（收到“未定义”）。确保以大写字母开头的组件名称

Posted 2023-02-22

【中文标题】组件“div”的视图配置 getter 回调必须是一个函数（收到“未定义”）。确保以大写字母开头的组件名称

【英文标题】：view config getter callback for component 'div' must be a function (received 'undefined'). Make sure to start component names with a capital letter

【发布时间】：2020-08-14 19:15:29

【问题描述】：

错误是：不变违规：组件“div”的视图配置 getter 回调必须是函数（收到“未定义”）。确保以大写字母开头组件名称。 我在尝试将数据从firebase检索到React 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 
);

【参考方案1】：

你不能在 react native 中使用 div 用 View 改变它

改变

      <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>

希望这会有所帮助！

【讨论】：

感谢您解决我的疑问，更改代码后错误未显示，但无法在我的屏幕上显示数据库的任何数据@user12129132

那么从firebase检索数据有问题，检查一次

一个空数组正在控制台中打印@user12129132

你能通过我的代码来检查它是否正确吗？ @user12129132

检查你得到了什么 query.once("value").then((snapshot) => 在此之后通过安慰快照

【参考方案2】：

当您的组件导入不正确时，有时会发生此错误。在我的 react-native 项目中，FlatList 从 react-native-web 而不是 react-native 框架导入，导致上述错误。当我从 react-native 框架导入它时，它运行良好。

【讨论】：

这也是我的解决方案！ Visual Studio Code 已经从“react-native-web”导入了几次了！

aaah...拯救了我的一天！今天学到了关于 React 的新知识。

【参考方案3】：

有时您定义的视图必须大写。

const PresentationalComponent = (props) => 
   return (
    **<View>**
     <HeaderText></HeaderText>
    **</View>**
    
    
        
      
   )

export default PresentationalComponent

【参考方案4】：

我收到了类似的错误提示

错误是：不变违规：组件“表单”的视图配置 getter 回调必须是函数（收到“未定义”）。

我的问题是我使用的是来自 formik 的网络版本，所以我只需要使用将 Form 更改为 View 的 react native 版本。

希望它可以帮助其他人。