基于商店的反应导航引起警告

Question

我正在使用React-Navigation，在我的React Native Project中未说明。

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

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

成功签名后。

问题是我不希望直接从分配给提交按钮的功能中完成。我想根据全球未陈述的商店进行导航。

但是，这意味着我需要在Subscribe包装器内部使用条件。这就是导致可怕的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>
    );

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

Answer 1

我不确定反应 - 活动模式，但是您可以在此组件周围使用包装器，该组件订阅了" Mainstore"，并将其传递给该组件作为Prop。这样，您将可以在渲染方法之外访问"主店"。

Answer 2

我找到了一个更好的解决方案。我创建了一个我现在在任何功能上的组件上都称呼的事件，需要访问商店。这使我可以在道具中访问商店的状态和功能。这意味着，我可以随意使用该组件，挂钩和全部。

这就是它的样子：

withunstated.js

import React, { PureComponent } from "react";
import { Subscribe } from "unstated";
import MainStore from "../store/Main";
const withUnstated = (
  WrappedComponent,
  Stores = [MainStore],
  navigationOptions
) =>
  class extends PureComponent {
    static navigationOptions = navigationOptions;
    render() {
      return (
        <Subscribe to={Stores}>
          {(...stores) => {
            const allStores = stores.reduce(
              // { ...v } to force the WrappedComponent to rerender
              (acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
              {}
            );
            return <WrappedComponent {...allStores} {...this.props} />;
          }}
        </Subscribe>
      );
    }
  };
export default withUnstated;

在此标题中使用的示例：

import React from "react";
import { Text, View } from "react-native";
import styles from "./styles";
import { states } from "../../services/data";
import withUnstated from "../../components/WithUnstated";
import MainStore from "../../store/Main";
const Header = ({
  MainStore: {
    state: { vehicle }
  }
}) => (
  <View style={styles.plateInfo}>
    <Text style={styles.plateTop}>{vehicle.plate}</Text>
    <Text style={styles.plateBottom}>{states[vehicle.state]}</Text>
  </View>
);
export default withUnstated(Header, [MainStore]);

因此，现在您无需为您需要在渲染功能之外提供的所有商店创建一个百万包装组件。由于，作为一个附加的好东西，该事务所接受了一系列商店，使其完全插入并播放。并且 - 它可以与您的导航作品一起使用！

只记得将DisplayName添加到您的商店（ES-LINT都会提示您到达）。

这是一个简单的商店的样子：

import { Container } from "unstated";
class NotificationStore extends Container {
  state = {
    notifications: [],
    showNotifications: false
  };
  displayName = "NotificationStore";
  setState = payload => {
    console.log("notification store payload: ", payload);
    super.setState(payload);
  };
  setStateProps = payload => this.setState(payload);
}
export default NotificationStore;