redux-formのサーバーサイドバリデーションでpromissをいじってたら「Uncaught (in promise) error」

redux-formのサーバーサイドバリデーションでpromissをいじってたら「Uncaught (in promise) error」

プログラミング

react redux redux-form

2017-10-01 16:26:00

概要

redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。

解決策

returnがなかっただけでした。

修正前

class Categories extends Component {
  onSubmit(props) {
    const {createCategory, fetchCategories, reset} = this.props;

    createCategory(props).then((res) => {
      if (res.error) {
        console.log('error');
        throw new SubmissionError({name: 'User does not exist', _error: 'Login failed!'});
      } else {
        console.log('success');
        reset();
        fetchCategories();
      }
    });
  }

  // 以下色々省略
}

修正後

class Categories extends Component {
  onSubmit(props) {
    const {createCategory, fetchCategories, reset} = this.props;

    return createCategory(props).then((res) => {
      if (res.error) {
        console.log('error');
        throw new SubmissionError({name: 'User does not exist', _error: 'Login failed!'});
      } else {
        console.log('success');
        reset();
        fetchCategories();
      }
    });
  }

  // 以下色々省略
}

所感

jsむずい。promissまだ良くわかっていない。(コールバックを楽にするためのもの程度の認識。。。)

Laravel×ReactでSPAつくっているよーという方、ぜひLara Cafe
にご参加ください!(助けてぇ)

参考

Redux Form -Submit Validation Example
throw new SubmissionError() causing Uncaught (in promise) error