代码之家  ›  专栏  ›  技术社区  ›  renakre

使用formik处理react错误:对象作为react子对象无效

  •  0
  • renakre  · 技术社区  · 5 年前

    我有以下的 formik 登录表单。表单工作正常,除非在处理因登录尝试失败而引发的错误时,我收到以下应用程序错误:

    对象作为反应子对象无效(找到:错误:请求失败 状态代码为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 回复  |  直到 5 年前
        1
  •  1
  •   Pierre V.    5 年前

    问题在于: <div className={'alert alert-danger'}>{status}</div>

    status 是一个物体( console.log 它检查),不是一个字符串。

        2
  •  1
  •   Diamond shyke    5 年前

    错误是因为 status 是一个对象值。

    React 将不会在虚拟dom中呈现此原始对象。您只需要转换或呈现有用的属性。

    <div className={'alert alert-danger'}>{JSON.stringify(status)}</div>
    
    推荐文章