“运行时尚未准备好进行调试。”错误还是我错过了什么？

Question

大家好，我一直在尝试解决这个问题，但没有成功。

我目前正在用 react-native 制作一个项目，同时在我的 Mac OS 上运行模拟器。

我一直很好地编写应用程序，直到我必须在“app.js”中有条件地呈现一些标签。

这只是在出现错误之前，并且运行良好：

import React, { Component } from 'react';
import firebase from 'firebase';

import { View, Text } from 'react-native';
import { Header, Button } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {
  state = {
    loggedIn: null
  }

  componentWillMount() {
    console.log(this.state);

    firebase.initializeApp({
      apiKey: 'AIzaSyB4YTQAkin5epZ4nCl8kJSNhQdBn9c8tbY',
      authDomain: 'auth-79bfa.firebaseapp.com',
      databaseURL: 'https://auth-79bfa.firebaseio.com',
      projectId: 'auth-79bfa',
      storageBucket: 'auth-79bfa.appspot.com',
      messagingSenderId: '1089451858009'
    });

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

  render() {
    return (
      <View style={styles.viewContainer}>
        <Header headerText={'Authentication'} />
        <LoginForm />
      </View>
    );
  }

}

const styles = {
  viewContainer: {
    height: '100%'
  }
};

export default App;

在这之后，我添加了一个辅助函数来有条件地渲染一些 JSX。 在这里，您可以看到添加了 renderContent() 函数的同一个类：

import React, { Component } from 'react';
import firebase from 'firebase';

import { View, Text } from 'react-native';
import { Header, Button } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {
  state = {
    loggedIn: null
  }

  componentWillMount() {
    console.log(this.state);

    firebase.initializeApp({
      apiKey: 'AIzaSyB4YTQAkin5epZ4nCl8kJSNhQdBn9c8tbY',
      authDomain: 'auth-79bfa.firebaseapp.com',
      databaseURL: 'https://auth-79bfa.firebaseio.com',
      projectId: 'auth-79bfa',
      storageBucket: 'auth-79bfa.appspot.com',
      messagingSenderId: '1089451858009'
    });

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

  renderContent() {
    if (this.state.loggedIn) {
      return (
        <Button buttonText='Log Out' />
      );
    } else if (this.state.loggedIn === null) {
      return (
        <Text> Loading... </Text>
      );
    } else if (!this.state.loggedIn) {
      return (
        <LoginForm />
      );
    }
  }

  render() {
    return (
      <View style={styles.viewContainer}>
        <Header headerText={'Authentication'} />
        {this.renderContent()}
      </View>
    );
  }

}

const styles = {
  viewContainer: {
    height: '100%'
  }
};

export default App;

只需添加这个辅助函数，整个应用程序就会崩溃！！我启动了应用程序，实际上我看到了“正在加载...”文本，直到 firebase 响应，然后应用程序就崩溃了。它只是退出到主屏幕或给我臭名昭著的红屏，并出现以下错误：

Runtime is not ready for debugging.
 - Make sure Packager server is running.
- Make sure the JavaScript Debugger is running and not paused on a breakpoint or exception and try reloading again.

这真的让我慢了下来，我希望你们能帮助我！

这些是我的依赖项：

"dependencies": {
    "firebase": "^4.1.3",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.1"
},

Answer 1

尝试在您的辅助函数中添加超时。也许帮助函数已经在检查你的状态的内容，即使firebase还没有完成你的loggedIn状态的设置。如果它运行，请尝试确保您的辅助函数在触发之前等待您的 firebase 函数完成。