使用firebase将圆形结构转换为JSON反应导航答案

【问题标题】：Converting circular structure to JSON react-navigation with firebase使用firebase将圆形结构转换为JSON反应导航
【发布时间】：2018-03-12 04:21:28
【问题描述】：

嘿伙计们.. 我试图在我的项目中使用 react-navigation 和 firebase。我正在使用这个很棒的样板：-

https://github.com/jhen0409/react-native-boilerplate

在我的 navigator.js 中

import { StackNavigator } from 'react-navigation';

import Home from './containers/Home';
import MainScreen from './containers/MainScreen';
import HelpScreen from './containers/HelpScreen';

const AppNavigator = new StackNavigator(
  {
    Home: { screen: Home },
    MainScreen: { screen: MainScreen },
    HelpScreen: { screen: HelpScreen }
  },
  {
    headerMode: 'screen'
  },
);

export default AppNavigator;

然后在我的登录屏幕中，即 Home.js

@firebaseConnect()
@connect(
  state => ({
    nav: state.nav.routes
  }),
  dispatch => bindActionCreators(userActions, dispatch),
)

export default class Home extends Component {
  
  componentDidMount() {
    this.props.firebase.auth().onAuthStateChanged( user => {
      if(user) {
        
        //check route stack in redux store
        if(this.props.nav[this.props.nav.length-1].routeName !== 'MainScreen') {
          this.props.navigation.navigate('MainScreen');
        }
        
        this.props.firebase.updateProfile({ lastLogin: new Date() });
        user.getIdToken().then( t => this.props.userToken(t) );

      } else {
     
        this.props.firebase.auth().signInAnonymously()
        .then((user) => {
          console.log('user successfully sign in anonymously', user);
          // Insert user record to firebase
          this.props.firebase.updateProfile(
            {
             name: 'Anonymous'
            }
          )
        }) 
        .catch(
          (error) => {
          console.log('error ', error)
        })

      }
    })
  }

  render() {

    return (
      <View />
    );
  }
}

在我的 MainScreen.js 中

@firebaseConnect(['/helpDetails'])
@connect(
  (state, props) => {
  
    return({
    
    })
  }
)

export default class MainScreen extends Component {
  
  logout = () => {
    this.props.navigation.goBack();
    this.props.firebase.logout();
    console.log('logout!');
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={() => this.logout()}>
          <Text>LOG OUT</Text>
        </TouchableOpacity/>
      </View>
    )
  }
}

当用户打开应用程序时一切都很好。但是当我点击注销时它开始出现这个红色屏幕。如果我从

更改主屏幕内的 firebaseConnect

@firebaseConnect(['/helpDetails'])

到

@firebaseConnect([])

然后一切正常..

谁能帮我我在这里做错了什么？谢谢！

【问题讨论】：

这不是你的问题，而是图书馆的问题。我有同样的问题。感谢上帝，这仅在开发人员模式下发生（在发布时一切正常）。你在使用 Redux 开发工具吗？
哦，我以为是我的问题.. 是的，我正在使用 redux devtools.. 是这个原因吗？ @kolbma

标签： firebase react-native react-navigation react-native-firebase

【解决方案1】：

我认为这不是你的问题，而是图书馆的问题。我有同样的问题。感谢上帝，这仅在开发人员模式下发生（在发布时一切正常）。当我在没有 devtools 的情况下尝试它时，它可以工作。在我看来，react-redux-firebase 在注销时会做一些奇怪的事情，并创建（可能只是一秒钟）一个圆形的 JSON 结构。在 JavaScript 本身中这不是一个大问题，但是当您想要将其字符串化时（这样做是为了在您的开发工具中显示它），那么循环结构无法转换为字符串。希望开发人员能尽快解决这个问题。

相关问题：Github Issue react-redux-firebase

【讨论】：