Неопределенный неустановленный контейнер в собственном компоненте React с помощью навигации React

Question

Моя проблема в том, что я хочу получить доступ к контейнеру в компоненте, но он кажется неопределенным.

неопределенное изображение оповещения

Я использую Unstated, и, как вы можете видеть, это мой код в файле контейнера (login-container.js):

import { Container } from 'unstated'
class LoginContainer extends Container {
    constructor(props){
        super(props)
        this.state = {
            stepNumber: 0,
        }
    }
}
export default new LoginContainer()

И это app.js:

import React, { Component } from 'react'
import {  createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'

export default class App extends Component {
  render() {
    return (
      <Provider inject={[LoginContainer]}>          
          <AuthStack/>                            
      </Provider>
    )
  }
}

const SplashStack = createStackNavigator(...)

const AppStack = createStackNavigator(...)

const AuthStack = createStackNavigator(
  {
    Intro: { screen: Intro},
    Login: { screen: Login}
  },
  {
    headerMode: "none",
    initialRouteName: "Intro"
  }
)

const SwitchNavigator = createSwitchNavigator(...)

И это будет login.js:

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class Login extends Component {
  constructor(props){
    super(props)
  }

  render() {
    // const { state: {stepNumber} } = this.props.loginContainer
    alert(this.props.LoginContainer)
    return (
      <View>
        <Text>  someText  </Text>
      </View>
    )
  }
}

Ранее я пытался использовать компонент Subscribe для добавления контейнера в мое приложение, но я получил то же самое, что и здесь.

С помощью
- Реакция-нативный 0.58.6
- response-navigation 2.13.0 (из-за некоторых ошибок в v3)
- не указано 2.1.1

Answer 1

Что действительно здорово в Unstated, так это то, насколько просто это реализовать. Просто оберните ваш компонент рендеринга в Unstated"s <Subscribe to></Subscribe> теги и все готово. Всякий раз, когда вам setState() в контейнере, все Components тот Subscribe чтобы он был перерисован с Containerобновлен state доступные им значения свойств.

    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    import { Subscribe } from 'unstated';

    import LoginContainer from './containers/login-container';

    export default class Login extends Component {
      constructor(props){
        super(props)
      }

      render() {
        return (
          <Subscribe to={[LoginContainer, AnotherContainer]}>
            {(container, another) => (
              <View>
                <Text>{container.state.stepNumber}</Text>
              </View>
            })
          </Subscribe>
        );
      }
    }