Question

我有一个包含2个字段的电子邮件和密码登录屏幕，它工作正常，但是如果用户在其中一个字段中输入内容，则按“后退”按钮转到上一个屏幕，然后返回登录屏幕，该屏幕应重置为空白，但其中包含先前的用户输入。

当用户按下“后退”按钮且屏幕关闭时，如何清除/重置用户输入（即状态/道具）。我正在使用redux thunk，反应导航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;
    }
};

任何帮助将不胜感激！

Answer 1

解决方案1 

导航到reset时，将LoginScreen参数添加到您的class LoginScreen extends React.Component { componentWillReceiveProps(nextProps) { const nextReset = nextProps.navigation.getParam("reset"); const reset = this.props.navigation.getParam("reset"); if (nextReset && nextReset !== reset) { // Create a redux action to clear field values: nextProps.resetFieldsAction(); } } }：

this.props.navigation.navigate("LoginScreen", { reset: true });

这是您导航到登录屏幕的方式：

import {NavigationEvents} from 'react-navigation';

解决方案2

redux action

将此组件添加到渲染方法中，并在组件重新获得焦点时调用<NavigationEvents onDidFocus={() => this.props.resetFieldsAction()} />：

  <serviceThrottling 
            maxConcurrentCalls="1000" 
            maxConcurrentSessions="1000" 
            maxConcurrentInstances="1000"
          />

Answer 2

您可以采取另一种措施来清除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();
}

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

2 个答案: