react-native - 基于未声明的存储的 React Navigation 导致警告

Question

我在我的 React Native 项目中使用了 React-navigation 和 Unstated。

我有一种情况想要使用:

this.props.navigation.navigate("App")

成功登录后。

问题是我不希望它直接从分配给提交按钮的函数完成。我想根据全局 Unstated 商店进行导航。

但是，这意味着我需要在 Subscribe 包装器内部使用条件。这就是导致可怕的警告:在现有状态转换期间无法更新(例如在“渲染”期间)的原因。

  render() {
    const { username, password } = this.state;
    return (
      <Subscribe to={[MainStore]}>
        {({ auth: { state, testLogin } }) => {
          if (state.isAuthenticated) {
            this.props.navigation.navigate("App");
            return null;
          }
          console.log("rendering AuthScreen");
          return (
            <View style={styles.container}>
              <TextInput
                label="Username"
                onChangeText={this.setUsername}
                value={username}
                style={styles.input}
              />
              <TextInput
                label="Password"
                onChangeText={this.setPassword}
                value={password}
                style={styles.input}
              />
              {state.error && (
                <Text style={styles.error}>{state.error.message}</Text>
              )}
              <Button
                onPress={() => testLogin({ username, password })}
                color="#000"
                style={styles.button}
              >
                Sign in!
              </Button>
            </View>
          );
        }}
      </Subscribe>
    );

它有效。但正确的做法是什么？我无法访问 Subscribe 之外的 MainStore，因此无法访问 render 之外的内容。

Answer 1

我不确定 react 导航模式，但您可以在该组件周围使用一个包装器，该包装器订阅“MainStore”并将其作为 Prop 传递给该组件。这样您就可以在渲染方法之外访问“MainStore”。