Question

我有一个显示登录表单的组件。当用户单击登录以提交其凭据时，它们将通过后端服务进行身份验证，并且我会收到响应或错误。收到错误时，我想显示一条简单的错误消息。但是，我在弄清楚提交后如何将标志值传递给组件时遇到了麻烦。

const initialValues = {
  username: '',
  password: '',
  invalidCred: false,
}

class LoginForm extends Component<InjectedFormikProps<Props, Values>, State> {
  readonly state = initialState

  render() {
    const { classes, values, errors, handleChange, handleSubmit } = this.props
    return (
      <form className={classes.container}>
        <Grid container>
          <Grid item xs={12} className={classes.grid}>
            {values.invalidCred && (<div>I got issues man</div>)}
            <TextField
              fullWidth
              data-cy="login-username"
              name="username"
            />
          </Grid>
          <Grid item xs={12} className={classes.grid}>
            <TextField
              fullWidth
              data-cy="login-password"
              name="password"
            />
          </Grid>
          <Grid item xs={12} className={classes.grid}>
            <Button
              disabled={false}
              fullWidth
              color="primary"
              variant="outlined"
              data-cy="submit"
              onClick={() => handleSubmit()}
              className={classes.submit}>
              Sign In
            </Button>
          </Grid>
        </Grid>
      </form>
    )
  }
}

const LoginFormEnhanced = withFormik<Props, Values>({
  validationSchema,
  mapPropsToValues: (props: Props) => initialValues,
  handleSubmit: async (values: Values, { props, setSubmitting }: FormikBag<Props, Values>) => {
    const { username, password } = values

    await props.request({ username, password })

    const [error, response] = await to<AxiosResponse<any>, ServerResponseError>(AuthService.login(username, password))

    setSubmitting(false)

    if (response) {
      await props.success({ username, password })
      props.populate(getUserObj(response.data) as Profile)
      props.history.push('/')
    }
    if (error) {
      values.invalidCred = true   <---- THIS IS THE FLAG I WANT TO PASS TO THE COMPONENT IF AN ERROR OCCUS
      props.failure()
    }
  }
})(LoginForm)

登录失败后如何将handleSubmit（）函数中表单的状态更改为invalidCreds标志设置为true？

Answer 1

只要组件状态内部发生更改，并且父级状态作为props传递，React的反应性系统就会触发。因此，如果您有一个调用API进行身份验证的组件，并且必须向用户显示一些反馈，则可以在error状态下添加一个LoginComponent属性，并在响应到达时对其进行更新。

const Login = props =>{
    const [authError, errorSetter] = useState(false)

    useEffect(() =>{
        //API call
            .then(res => /*If success update the state with data*/)
            .catch(err => errorSetter(true))
    })
    return(
        {/*....*/}
        {authError && <div> My error message</div>}
    )
}

使用Formik登录失败时将标志传递到组件状态

1 个答案: