应用程序在Android工作室模拟器上不断崩溃/停止

时间:2018-01-20 22:04:46

标签: android android-studio react-native

我尝试重新创建组件以访问firebase上托管的其他数据。应用程序一启动就会一直停止。

抛出错误:

FATAL EXCEPTION:main进程:com.auth,PID:3320 com.facebook.react.uimanager.IllegalViewOperationException:尝试添加未知的视图标记:5                                                          detail:查看标签:21                                                           儿童(1):[                                                         4,                                                          ]                                                           viewsToAdd(1):[                                                         [1,5],                                                          ],

使用的代码:

import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import firebase from 'firebase';
import { Header, Button, Spinner, CardSection, AlbumDetail } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {
    state = { loggedIn: null, albums: [] };

 componentWillMount() {
 firebase.initializeApp({
 apiKey: 'xx',
 authDomain: 'xx',
 databaseURL: 'xx',
 projectId: 'xx',
 storageBucket: 'xx',
 messagingSenderId: 'xx'
});

    axios.get('https://xx')
            .then(response => this.setState({ albums: response.data }));

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderAlbums() {
        return this.state.albums.map(album => 
            <AlbumDetail key={album.District} album={album} />);
    }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
        <CardSection>
          <Button onPress={() => firebase.auth().signOut()}>
            Log Out
          </Button>
        </CardSection>  
        );
      case false:
        return <LoginForm />;
      default:
        return <Spinner size='large' />;
    }
  }

  render() {
    return (
      <View>
        <Header headerText='Authentication' />
        console.log(this.state.albums)
        {this.renderContent()}
      </View>
    );
  }
}

export default App;

任何想法为什么?

1 个答案:

答案 0 :(得分:0)

首先更改componentDidMount的componentWillMount。它是查询网络资源的推荐方法。此外,这可确保在对组件进行任何更改之前安装该组件。

其次,从JSX之间删除console.log,这不起作用,可能是你的主要问题。

第三,不要像这样分配国家。使用像这样的构造函数:

constructor(props){
  super(props);
  this.state = { loggedIn: null, albums: [] };
}