Блог

Я пытаюсь прочитать из контекста (который, как я проверил, заполнен правильно) функциональный компонент на App.js, Я не определяюсь, когда ставлю приложение в фоновом режиме…

Вот App.js

 import AppContext from './Context/AppContext.js'

export default function App() {
    
    const contextValue = useContext(AppContext);
    
    const appState = useRef(AppState.currentState);
    const [appStateVisible, setAppStateVisible] = useState(appState.current);
  
    const defaultProviderValue = {userInfo: {}} 
    
    const [fontsLoaded ,setFontsLoaded] = useState(false);

    useEffect(() => {
        AppState.addEventListener("change", _handleAppStateChange);

        _loadFontsAsync();
    }, [])
  
    const _handleAppStateChange = (nextAppState) => {
        console.log("CONTEXT a _handleAppStateChange: "   JSON.stringify(contextValue));  // I get: "CONTEXT a _handleAppStateChange: undefined"
        if ( nextAppState !== "active" ) {
            console.log("Starting Saving!");
            
            if (contextValue amp;amp; contextValue.userinfo) {
                AsyncStorage.setItem("userinfo", JSON.stringify(this.context.userInfo));
                console.log("Data saved!");
            }
        }
  };
  
  const fonts = {
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
  };
  
  async function _loadFontsAsync() {
    await Font.loadAsync(fonts);
    setFontsLoaded(true)
  }

  if (!fontsLoaded ) {
    return null;
  }

  return (
        <Root>
            <UserProvider value = {defaultProviderValue}>
                <Container>
                    <AppNavigator />
                </Container>
            </UserProvider>
        </Root>
    )
}
 

AppContext.js

 import React, { Component } from 'react'

const AppContext = React.createContext();

class UserProvider extends Component {
  // Context state
  state = {
    userInfo: {},
  }

  // Method to update state
  setUserInfo = (user) => {
    this.setState({userInfo: user })
  }
  
  render() {
    const { children } = this.props
    const { userInfo } = this.state
    const { setUserInfo } = this
    return (
      <AppContext.Provider
        value={{
          userInfo,
          setUserInfo,
        }}
      >
        {children}
      </AppContext.Provider>
    )
  }
}

export default AppContext;

export { UserProvider };
 

Контекст правильный, как и на другом экране (на главном экране), который является экраном компонента класса, контекст заполнен правильными данными.

есть идеи, почему не работает над моим app.js?