组件“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 回调必须是函数(收到“未定义”)