Question

在登录页面上输入凭据后，我被定向到预期的页面，但控制台中显示此错误。如果我正确理解它是由Formik造成的，而组件未卸载？我搜索了具有类似错误的用户，但似乎可以找到针对我的错误的修复程序。

import React, { useState, useEffect } from 'react';
import { Form, Field, withFormik } from 'formik';
import Axios from 'axios';
import * as Yup from 'yup';

import './signin.scss';

const SignIn = ({ errors, touched, values, status }) => {
  const [user, setUser] = useState([]);
  // console.log(user);

  useEffect(() => {
    if (status) {
      setUser([...user, status]);
    }
  }, [user, status]);

  return (
    <div className='loginForm'>
      <h1>Log In</h1>
      <Form>
        <label className='inputLabels' htmlFor='username'>
          <b>Username/Email:</b>
          <Field
            className='inputFields'
            component='input'
            type='text'
            name='username'
            placeholder='Chef213'
          />
          {touched.username && errors.username && <p>{errors.username}</p>}
        </label>
        <br />
        <label className='inputLabels' htmlFor='password'>
          <b>Password:</b>
          <Field
            className='inputFields'
            component='input'
            type='password'
            name='password'
            placeholder='password1'
          />
          {touched.password && errors.password && <p>{errors.password}</p>}
        </label>
        <br />
        <div className='buttons'>
          <button type='submit'>Log In</button>
        </div>
      </Form>

      {user.map(users => (
        <p key={users.id}>{users.FirstName} You have successfully logged in.</p>
      ))}
    </div>
  );
};

const FormikSignIn = withFormik({
  mapPropsToValues({ username, password }) {
    return {
      username: username || '',
      password: password || ''
    };
  },

  validationSchema: Yup.object().shape({
    username: Yup.string().required('Username is required'),
    password: Yup.string()
      .required('Password is required')
      .min(8, 'Password is too short - should be 8 chars minimum.')
      .matches(/[a-zA-Z]/, 'Password can only contain Latin letters.')
  }),

  handleSubmit(values, { props, setStatus }) {
    console.log('Form submited', values);
    Axios.post('https://bw-how-to.herokuapp.com/login', values)
      .then(res => {
        // console.log(res);
        if (res.status === 200) {
          props.history.push(`/homepage`);
          setStatus(res.data);
        }

        // resetForm();
      })
      .catch(err => console.error('Error', err.response));
  }
})(SignIn);

export default FormikSignIn;

更正此错误的最佳方法是什么？

Answer 1

我假设您正在使用React Router？我认为您可以通过翻转setStatus和props.history.push来解决您的问题。发生的情况是，您导航到新页面，然后尝试设置状态。如果先设置状态，然后再导航，它应该可以解决该错误消息。

handleSubmit(values, { props, setStatus }) {
    console.log('Form submited', values);
    Axios.post('https://bw-how-to.herokuapp.com/login', values)
      .then(res => {
        // console.log(res);
        if (res.status === 200) {
          setStatus(res.data);
          props.history.push(`/homepage`);
        }

        // resetForm();
      })
      .catch(err => console.error('Error', err.response));

如何取消取消所有订阅和异步任务？

1 个答案: