react-native - 未声明的基于商店的 React Navigation 导致警告

Question

我在我的 react native 项目中使用 react-navigation 和 Unstated 。

我有一种情况，我想使用：

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

成功登录后。

问题是我不希望它直接从分配给提交按钮的功能中完成。我想基于全球未说明的商店进行导航。

但是，这意味着我需要使用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.

标签： react-nativereact-navigationunstated

Answer 1

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