【问题标题】:objects are not valid as react child (react-native)对象作为反应子无效(react-native)
【发布时间】:2018-11-16 17:56:48
【问题描述】:

我正在尝试在我的 react 本机项目中初始化 firebase。

This is the error I am facing

App.js 的代码,我正在初始化它

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import firebase from 'firebase';

class App extends Component {

  componentWillMount () {
    const config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
    };
    firebase.initializeApp(config);
  }

  render() {
    return (
      <Provider store={createStore(reducers)}>
      <View>
        <Text>Hello! </Text>
      </View>
    </Provider>
    );
  }
}

export default App;

当我只包含 import firebase from 'firebase'; 并且不初始化 config 时,我什至会遇到同样的错误

【问题讨论】:

  • 这看起来像同样的错误,所以我将它们链接起来以防万一:github.com/firebase/firebase-js-sdk/issues/…
  • 遇到了同样的问题,cleberton 回复 here 为我解决了问题。
  • 遇到了同样的问题,cleberton 回复 here 为我解决了问题。

标签: reactjs firebase react-native firebase-authentication


【解决方案1】:

导出在 5.0.4 及更高版本中发生了变化。现在你需要这样做:

import firebase from '@firebase/app'

如果您使用 eslint,您可能会收到抱怨说它应该列在项目依赖项中,但您可以忽略它。

您可能还想使用 firebase 的实际功能,而不仅仅是核心导入。例如,要使用身份验证模块,您需要添加以下内容:

import '@firebase/auth'

【讨论】:

  • 对于实时数据库是 import '@firebase/database'?
  • 仍然不明白为什么这会导致报告的错误,但它也对我有用。谢谢
【解决方案2】:

尝试在构造函数上初始化而不是 componentWillMount

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import firebase from 'firebase';

class App extends Component {

 constructor(props){
    super(props)
    const config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
    };
    firebase.initializeApp(config);
  }


  render() {
    return (
      <Provider store={createStore(reducers)}>
      <View>
        <Text>Hello! </Text>
      </View>
    </Provider>
    );
  }
}

export default App;

【讨论】:

  • 没用!我重复错误主要是由于import firebase from 'firebase';我需要成功重要它。我已经在项目的根目录中使用npm install firebase --save 安装了firebase。
猜你喜欢
  • 1970-01-01
  • 2020-04-26
  • 2020-07-25
  • 2019-05-06
  • 2018-08-08
  • 2019-08-18
  • 2022-09-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多