基于Unstated store的React Navigation导致警告

Question

我在反应本机项目中使用react-navigation和Unstated。

我有一个我想使用的情况：

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

成功登录后。

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

但是，这意味着我需要使用Subscribe包装器的条件INSIDE。这就是导致可怕的Warning: Cannot update during an existing state transition (such as within 'render').的原因

  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>
    );

有用。但是这样做的正确方法是什么？我无法访问MainStore以外的Subscribe，因此在render之外。