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

r3i60tvu  于 2023-03-31  发布在  React
关注(0)|答案(8)|浏览(211)

错误是:不变量违规:组件'div'的view config getter回调必须是一个函数(接收到'undefined')。确保组件名称以大写字母开头。我在尝试从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 }
});
xnifntxz

xnifntxz1#

有时,当组件的导入不正确时会发生此错误。在我的react-native项目中,FlatList是从react-native-web而不是react-native framework导入的,这导致了上述错误。当我从react-native framework导入时,它工作正常。

4ioopgfo

4ioopgfo2#

你不能在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>

希望这有帮助!

bnlyeluc

bnlyeluc3#

我得到了一个类似的错误,它说
错误是:不变量违规:组件“form”的视图配置getter回调必须是一个函数(接收到“未定义”)。
我的问题是,我使用的是一个Web版本,使用从formik,所以我只需要使用React Native之一,这是改变形式到视图。
希望它能帮助其他人。

yjghlzjz

yjghlzjz4#

如果从react-native-web而不是react-native导入“TouchableOpacity”,则从错误的组件模块导入组件时会发生错误

6g8kf2rb

6g8kf2rb5#

我有问题,它得到了修复,只是改变了目的地,从我进口
我不得不导入TouchableOpacity。在VSCode中,代码片段选择了错误的库,因此它被插入为这样

import { TouchableOpacity } from "react-native-web";

而不是

import { TouchableOpacity } from "react-native";

在正确的导入中更改它帮助我解决了这个问题。
只是回答让你知道这也是一种固定。

ssgvzors

ssgvzors6#

我经常遇到这种情况。每当我声明TouchableOpacity或其他组件时,vscode都会自动从'react-native-web'导入组件。但是我们应该从'react-native'导入它所以确保我们从**'react-native'导入它**

hof1towb

hof1towb7#

我刚刚在另一个模块中体验到了这一点:React-Insta-Stories。在花了大约一个小时的故障排除后,我现在发现该模块从未用于React Native。所以,如果您遇到这种类型的错误,请检查以确认该模块旨在在React Native中工作,而不仅仅是react。

slwdgvem

slwdgvem8#

有时您定义的View必须大写。

const PresentationalComponent = (props) => {
   return (
    **<View>**
     <HeaderText></HeaderText>
    **</View>**
    
    
        
      
   )
}
export default PresentationalComponent

相关问题