状態を使用してフィールドが無効かどうかを確認します

Question

私はユーザがぼやけた後にサーバに存在しない場合、エラーメッセージを表示するユーザ名フィールドを持っています。コンポーネントを再レンダリングした後、最新のフォームを取得することはできません。私のような何かをする必要があります。

export const asyncLogin = (values, dispatch, props) => { 
    return new Promise((resolve, reject) => { 
     const errors = {}; 
     if (!values.username || _.isEmpty(props.emailVerify)) { 
      errors.username = 'Invalid username!'; 
     } 
     resolve(errors); 
    }); 
}; 

Answer 1

別の方法は、私はasyncLogin機能により更新さ小道具を得ることができないため、ユーザー名を検証するためのAPIリクエストを送信することです[OK]をクリックします。私はこれを使うべきかどうかは分かりません。なぜなら、redux-sagaミドルウェアを使って同様のアクションをディスパッチしてストアを更新しているからです。そういうわけで、更新された小道具でユーザー名のフィールドを検証しようとしました。同様の質問が以前に投稿されたRedux form - how to pass UPDATED props to validation function?。同じような問題に直面している人は、コードをどのように構造化するのですか（コードを即興または構造化する方法をお勧めします）：

// validations/index.js 
import * as api from '../services/api'; 

export const asyncLogin = (values) => { 
    return new Promise((resolve, reject) => { 
     api.appendDomain({username: values.username}).then(email => { 
      api.emailVerify({email}).catch(err => { 
       const errors = {}; 
       errors.username = 'Invalid username!'; 
       resolve(errors); 
      }); 
     }).catch(errors => { 
      reject(); 
     }); 
    }); 
}; 

// components/loginForm.js 
const LoginForm = (props) => (
    <div className="auth-form-content"> 
     <form> 
      <Field name="username" 
       component={UsernameField} 
       appendDomain={props.appendDomain} 
       emailVerify={props.emailVerify} 
       action={props.dispatch} 
       usernameInputVerify={true} 
       placeholder="Hark, who goes there!" /> 
      <Field name="password" component={PasswordField} placeholder="What's the password?" /> 
      <button type="submit" className="waves-effect waves-light btn-large light-blue accent-4" disabled="disabled">Beam me up, Scotty.</button> 
     </form> 
    </div> 
); 

export default reduxForm({ 
    form: 'login', 
    asyncBlurFields: ['username'], 
    asyncValidate: asyncLogin 
})(LoginForm);