reactjs - 重新打开屏幕时 Redux 显示旧状态

问题描述

我有一个包含 2 个字段电子邮件和密码的登录屏幕，它工作正常，但如果用户输入任一字段，然后按后退按钮转到上一个屏幕，然后返回登录屏幕，屏幕应该被重置并空白，但它包含以前的用户输入。

当用户按下后退按钮并且屏幕关闭时，如何清除/重置用户输入，即（状态/道具）。我正在使用 redux thunk，React Navigation 3

这是我的登录屏幕代码。

登录界面

class LoginScreen extends Component {
    constructor(props) {
    super(props);
    this.unsubscriber = null;
}

componentWillUnmount(): void {
    if (this.unsubscriber) {
    this.unsubscriber();
    }
}

onEmailChange(text) {
    this.props.emailChanged(text);
}

onPasswordChange(text) {
    this.props.passwordChanged(text);
}

onConfirmPasswordChange(text) {
    this.props.confirmPasswordChanged(text);
}

onLoginButtonPress() {
    let {email, password} = this.props;
    let currentAnonymousFirebaseUser = firebase.auth().currentUser;
    this.props.loginUser({email, password, currentAnonymousFirebaseUser});
}

renderError() {
    if (this.props.error) {
      return (
        <View
          style={{backgroundColor: "#fff", paddingBottom: 5, paddingTop: 5}}>
          <Text style={styles.errorTextStyle}>{this.props.error}</Text>
        </View>
      );
    }
}

renderLoginButton() {
    if (this.props.loading) {
        return <Spinner size="large" />;
    }
    return <Button onPress={() => this.onLoginButtonPress()}>Login</Button>;
}

render() {
    return (
      <Card>
        <CardSection>
          <Row>
            <Input
              label="Email"
              placeholder="email@gmail.com"
              onChangeText={this.onEmailChange.bind(this)}
              value={this.props.email}
            />
          </Row>
        </CardSection>

        <CardSection>
          <Row>
            <Input
              secureTextEntry
              label="Password"
              placeHolder="password"
              onChangeText={this.onPasswordChange.bind(this)}
              value={this.props.password}
            />
          </Row>
        </CardSection>

        {this.renderError()}

        <CardSection>
          <Row>{this.renderLoginButton()}</Row>
        </CardSection>
      </Card>
      );
   }
}

const mapStateToProps = ({auth}) => {
    const {email, password, confirmPassword, error, loading} = auth;
    return {email, password, confirmPassword, error, loading};
};

export default connect(mapStateToProps, {
    emailChanged,
    passwordChanged,
    confirmPasswordChanged,
    loginUser
})(LoginScreen);

减速器

const INITIAL_STATE = {
    email: "",
    password: "",
    confirmPassword: "",
    user: null,
    error: "",
    loading: false
};

export default (state = INITIAL_STATE, action) => {
    console.log(action);

    switch (action.type) {
        case EMAIL_CHANGED:
          return {...state, email: action.payload};

        case PASSWORD_CHANGED:
          return {...state, password: action.payload};

        case CONFIRM_PASSWORD_CHANGED:
          return {...state, confirmPassword: action.payload};

        case CREATE_USER_ACCOUNT:
          return {...state, loading: true, error: ""};

        case CREATE_USER_ACCOUNT_SUCCESS:
          return {...state, ...INITIAL_STATE, user: action.payload};

        case CREATE_USER_ACCOUNT_FAIL:
          return {...state, error: action.payload, loading: false};

       case LOGIN_USER:
          return {...state, loading: true, error: ""};

        case LOGIN_USER_ANONYMOUSLY:
          return {...state};

        case LOGIN_USER_SUCCESS:
          return {...state, ...INITIAL_STATE, user: action.payload};

        case LOGIN_USER_FAIL:
          return {...state, error: action.payload, loading: false};

        default:
          return state;
    }
};

任何帮助将不胜感激！

标签： reactjsreact-nativereduxreact-redux

您可以在 redux 中执行其他操作来清除数据，例如

const clearData = () => {
  return{
  type: "CLEAR"
 };
};

在你的减速器中，你可以只使用这个 clearData，例如

 case "CLEAR"
 return {...state, ...INITIAL_STATE}

或者

 case "CLEAR"
 return {...state, email: INITIAL_STATE.email}

这取决于您的用例。当一切都完成时。

componentWillUnmount只需在您的登录屏幕上调用此操作

例如

componentWillUnmount() {
 this.props.clearData();
}

reactjs - 重新打开屏幕时 Redux 显示旧状态

问题描述

解决方案

推荐阅读