[英]Undefined Unstated Container in a React Native Component using React Navigation
My problem is That I want to access a Container in a component but it seems to be undefined.我的问题是我想访问组件中的 Container 但它似乎未定义。
I am using Unstated and as you can see this is my code in the container file (login-container.js):我正在使用 Unstated,正如您所看到的,这是我在容器文件 (login-container.js) 中的代码:
import { Container } from 'unstated'
class LoginContainer extends Container {
constructor(props){
super(props)
this.state = {
stepNumber: 0,
}
}
}
export default new LoginContainer()
And this is app.js:这是 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(...)
And this would be login.js:这将是 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>
)
}
}
I previously tried to use Subscribe component to inject the container to my app but I got the same thing I am getting here.我之前尝试使用 Subscribe 组件将容器注入我的应用程序,但我得到了同样的结果。
Using使用
- react-native 0.58.6 - 反应原生 0.58.6
- react-navigation 2.13.0 (due to some bugs in v3) - 反应导航 2.13.0(由于 v3 中的一些错误)
- unstated 2.1.1 - 未说明的 2.1.1
What's really great about Unstated is how simple it is to implement. Unstated 真正伟大的地方在于它的实现非常简单。 Just wrap your render component in
Unstated
's <Subscribe to></Subscribe>
tags and you're good to go.只需将您的渲染组件包装在
Unstated
的<Subscribe to></Subscribe>
标签中,您就可以开始使用了。 Whenever you setState()
in the Container, all Components
that Subscribe
to it get re-rendered with the Container
's updated state
property values available to them.每当您在 Container 中
setState()
时,所有Subscribe
它的Components
都会使用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>
);
}
}
UPDATE: Or do it in this HOC way.更新:或者以这种 HOC 方式进行。 After creating this:
创建此后:
WithUnstated.js WithUnstated.js
import React, { PureComponent } from "react";
import { Subscribe } from "unstated";
import DefaultStore from "../store/DefaultStore";
const withUnstated = (
WrappedComponent,
Stores = [DefaultStore],
navigationOptions
) =>
class extends PureComponent {
static navigationOptions = navigationOptions;
render() {
return (
<Subscribe to={Stores}>
{(...stores) => {
const allStores = stores.reduce(
(acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
{}
);
return <WrappedComponent {...allStores} {...this.props} />;
}}
</Subscribe>
);
}
};
export default withUnstated;
Then wrap your component like so:然后像这样包装你的组件:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
import AnotherContainer from './containers/another-container';
class Login extends Component {
constructor(props){
super(props)
}
render() {
const {LoginContainer: container} = this.props;
return (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
);
}
}
export default withUnstated(Login, [LoginContainer, AnotherContainer])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.