response-native response-thunk срабатывание при начальной загрузке компонента и любое нажатие клавиши на входе - PullRequest
Новая
       18

response-native response-thunk срабатывание при начальной загрузке компонента и любое нажатие клавиши на входе

0 голосов
/ 05 февраля 2020

Я немного новичок, чтобы реагировать, реагировать на натуру, реагировать на редукцию и реагировать, и я столкнулся с этой странной проблемой, которую я не могу объяснить.

У меня есть компонент входа который использует thunk для аутентификации пользователя. Я mapDispatchToProps и применяю его к компоненту, но по какой-то причине каждый раз, когда компонент рендерит, он запускает thunk, а затем после каждого нажатия клавиши в любом поле ввода, thunk также запускается. это создает бесчисленные вызовы API аутентификации, которые все терпят неудачу.

Что может вызвать такое поведение? 

const SignIn = ({navigation, signIn}: any): React.ReactElement => {
  const [username, setUsername] = React.useState<string>('');
  const [password, setPassword] = React.useState<string>('');
  const [passwordVisible, setPasswordVisible] = React.useState<boolean>(false);

  const onForgotPasswordButtonPress = (): void => {
    navigation && navigation.navigate('Forgot Password');
  };

  const onPasswordIconPress = (): void => {
    setPasswordVisible(!passwordVisible);
  };

  const passwordInput = useRef() as React.MutableRefObject<any>;

  return (
    <KeyboardAvoidingView>
      <ImageOverlay
        style={styles.container}
        source={require('../assets/images/image-background3.jpg')}>
        <SafeAreaView style={styles.container}>   
          <View style={styles.formContainer}>
            <Input
              status="control"
              placeholder="Username"
              autoCapitalize={'none'}
              autoCompleteType={'off'}
              autoCorrect={false}
              autoFocus={false}
              icon={PersonIcon}
              value={username}
              onChangeText={setUsername}
              returnKeyType={'next'}
              blurOnSubmit={false}
              onSubmitEditing={() => passwordInput.current.focus()}
            />
            <Input
              ref={passwordInput}
              style={styles.passwordInput}
              status="control"
              placeholder="Password"
              autoCapitalize={'none'}
              autoCompleteType={'off'}
              autoCorrect={false}
              icon={passwordVisible ? EyeIcon : EyeOffIcon}
              value={password}
              secureTextEntry={!passwordVisible}
              onChangeText={setPassword}
              onIconPress={onPasswordIconPress}
              onSubmitEditing={() => signIn(username, password)}
            />
            <View style={styles.forgotPasswordContainer}>
              <Button
                style={styles.forgotPasswordButton}
                appearance="ghost"
                status="control"
                onPress={onForgotPasswordButtonPress}>
                Forgot your password?
              </Button>
            </View>
          </View>
          <Button
            style={styles.signInButton}
            status="control"
            size="large"
            disabled={username.length === 0 || password.length === 0}
            onPress={signIn(username, password)}>
            Sign In
          </Button>
        </SafeAreaView>
      </ImageOverlay>
    </KeyboardAvoidingView>
  );
};

const mapDispatchToProps = (dispatch: any) => ({
  signIn: (username: string, password: string) =>
    dispatch(signInThunk(username, password)),
});

export const SignInScreen = connect(
  null,
  mapDispatchToProps,
)(SignIn);

thunk: 

export const signInThunk = (username: string, password: string) => {
  return async (dispatch: any) => {

    try {
      dispatch(isLoading(true));

      const userData = await fetch(Providers.auth, {...})
        .then(response => response.json())
        .then(() => dispatch(isLoading(false)));

      if(userData.token){
       dispatch(signInAction(userData.token));
       dispatch(updateProfileAction(userData));
      }

      dispatch(isLoading(false));
    } catch (error) {
      console.error(error);
    }
  };
};

1 Ответ

1 голос
/ 05 февраля 2020

Это распространенная ошибка, просто измените: 

onPress={signIn(username, password)}

на 

onPress={() => signIn(username, password)}
...