如何从另一个组件单击按钮时更新一个类组件中的状态？

Question

我对React Native还是比较陌生，我想建立一个非常简单的身份验证流程。基本逻辑有效，我无法处理的是需要更改顶级App.js中状态的“登录”按钮事件：

1. 我有一个顶级App.js，它呈现了一个简单的Stack Navigator，具有3个可能的屏幕：SplashScreen（直到isLoading状态更改为false），LoginScreen（如果isLoggedIn状态为false）和LaunchScreen（如果isLoggedin状态为true）

2. 根据docs，我运行加载函数，该函数从App.js的componentDidMount（）函数中的远程服务器获取用户身份验证数据。无论返回什么结果，它都会将isLoading状态设置为false并将isLoggedIn设置为false设置为true。假设为了简单起见，现在返回1并完成了加载。 isLoggedIn暂时保持为假，因此用户进入登录屏幕。

App.js

import SplashScreen, {myLoadingFunction} from './SplashScreen.js'
// Other imports

const Stack = createStackNavigator()

export default class App extends React.Component {

  constructor(props) {
    super(props);      
    this.state = {
      isLoggedIn: false,
      isLoading: true
    }      
  }

  componentDidMount() {
    if (myLoadingFunction () == 1) {
      this.setLoadingFinished()
    }
  }

   setLoggedIn = () => (   
    this.setState({ 
      isLoggedIn: true,
    })    
   )

   setLoadingFinished = () => (   
    this.setState({ 
      isLoading: false
    })    
   )

  render() {
    // Show SplashScreen while verifying user token
    if (this.state.isLoading) return <SplashScreen />

    return (
      <MyProvider>
        <NavigationContainer>
              <Stack.Navigator>

                {this.state.isLoggedIn == true ? (
                  // User is signed in
                  <Stack.Screen
                    name="LaunchScreen"
                    component={LaunchScreen}
                  />
                ) : (

                   // No token found, user isn't signed in
                  <Stack.Screen name="LoginScreen" component={LoginScreen} />
                )}

              </Stack.Navigator>
        </NavigationContainer>
      </MyProvider>
    );
  }

}

SplashScreen.js

export const myLoadingFunction = () => {
    // fetching some data from server
    console.log("Splash Screen loading/fetching data...")
    return 1
}

export default class SplashScreen extends React.Component {

    render (){
        return (
            <View>
                <Text>Application is being loaded...</Text>
            </View>
        )
    }    
}

直到确定可以，在安装App组件之后，我将使用一个简单的逻辑（myLoadingFunction）来验证用户是否具有有效的令牌，然后返回一个值。当前，它将isLoading状态更改为false，不更改isLoggedIn状态，因此用户位于登录屏幕上。

LoginScreen.js

export const myFetchUserToken = () => {
    console.log("Login Screen fetching data...")
    return 1
}

export default class LoginScreen extends React.Component {

    render (){
        return (
            <View>
            <Text>You are currently logged out</Text>
            <Button title="Log In" onPress={()=>{}}/>
            </View>
        )
    }    
}

单击此按钮时，我只想在App中将isLoggedIn状态更改为true（为简单起见，现在跳过auth逻辑）。这将触发App中的渲染功能，并向用户显示启动屏幕。我该如何实现？

我尝试过的事情：

• 将setLoggedIn（）函数作为道具传递给SplashScreen，但Stack.Screen不接受道具
• 导出setLoggedin（）函数并将其导入到SplashScreen中，但是很明显，由于没有setState（）函数，在App Component外部的setLoggedIn（）失败了
• [使用Context API从isLoggedin创建全局状态，但很不幸失败

Answer 1

尝试在app.js中使用上下文api并在其中设置函数和状态。

示例：-1：-写这些行const defaultValue =更改状态的函数const MyContext = React.createContext（defaultValue）;2：-将app.js中的所有组件包装在一起...所有组件