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

Posted

技术标签:

【中文标题】组件“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 版本。

希望它可以帮助其他人。

【讨论】:

以上是关于组件“div”的视图配置 getter 回调必须是一个函数(收到“未定义”)。确保以大写字母开头的组件名称的主要内容,如果未能解决你的问题,请参考以下文章

组件异常:组件的视图配置 getter 回调必须是函数(收到“未定义”)

查看组件的配置getter回调``必须是一个函数

Plotly Dash 回调错误:试图隐藏 Div 组件

Vuetify css override 改变组件的视图

状态管理vuex的action,mutation,getter,state各种姿势的理解与应用

模拟单元测试的 Vuex getter 会产生意想不到的结果