Ошибка обработки в React с Formik: объекты недопустимы как дочерний элемент React - PullRequest
Новая
       17

Ошибка обработки в React с Formik: объекты недопустимы как дочерний элемент React

1 голос
/ 06 октября 2019

У меня есть следующая formik форма входа. Форма работает нормально, за исключением того, что при обработке ошибки, возникшей при неудачных попытках входа в систему, я получаю следующую ошибку приложения:

Объекты недопустимы как дочерние элементы React (найдено: Ошибка: запрос не выполнен с кодом состояния 500)). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Я использую setStatus(error);, чтобы показать ошибку. Видите ли вы какие-либо проблемы с кодом ниже? 

 <div>
     <h4>Login</h4>
     <Formik
         initialValues={{
             username: '',
             password: ''
         }}
         validationSchema={Yup.object().shape({
             username: Yup.string().required('Username is required'),
             password: Yup.string().required('Password is required')
         })}
         onSubmit={({ username, password }, { setStatus, setSubmitting }) => {
             setStatus();
             //authenticationService.login(username, password)
             axios({
                 method: 'post',
                 url: 'api/ApplicationUser/Authenticate',
                 data: {
                     Username: username,
                     Password: password
                 }
             }).then(
                 user => {

                     localStorage.setItem('currentUser', JSON.stringify(user));
                     currentUserSubject.next(user);

                     if (user !== null) {
                         if (user.data['roles'].result.includes('Admin'))
                             history.push('/admin/courses');

                         history.push('/home');
                     }
                 },
                 error => {
                     setSubmitting(false);
                     setStatus(error);
                 }
             );
         }}
         render={({ errors, status, touched, isSubmitting }) => (
             <Form>
                 <div className="form-group">
                     <label htmlFor="username">Username</label>
                     <Field name="username" type="text" className={'form-control' + (errors.username && touched.username ? ' is-invalid' : '')} />
                     <ErrorMessage name="username" component="div" className="invalid-feedback" />
                 </div>
                 <div className="form-group">
                     <label htmlFor="password">Password</label>
                     <Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
                     <ErrorMessage name="password" component="div" className="invalid-feedback" />
                 </div>
                 <div className="form-group">
                     <button type="submit" className="btn btn-primary" disabled={isSubmitting}>Login</button>
                     {isSubmitting && <div>Loading...</div>}
                 </div>
                 {
                     status &&
                     <div className={'alert alert-danger'}>{status}</div>
                 }
             </Form>
         )}
     />


 </div>

Ответы [ 2 ]

1 голос
/ 06 октября 2019

Ошибка в том, что status является значением объекта.

React не будет отображать этот необработанный объект в виртуальном DOM. Вам нужно конвертировать или визуализировать только полезное свойство. 

<div className={'alert alert-danger'}>{JSON.stringify(status)}</div>
1 голос
/ 06 октября 2019

Проблема заключается здесь: <div className={'alert alert-danger'}>{status}</div>

status - это объект (console.log это проверить), а не строка.

...