LoginSignup
2

More than 3 years have passed since last update.

Yupに「親の値を参照する」機能が実装されたので嬉しくてまとめ

Last updated at Posted at 2020-06-08

はじめに

Formikで利用する場合のYupのカスタマイズで色々使い方を書いたのですが、その頃には実装されていなかった、Yuptest()関数を実行するときに「親の値を参照する」機能がついに5月末に実装されたので使い方をまとめました。基本の使い方は判っている前提で書きます。これまでは色々裏道を使ってなんとか処理していましたが、これでとても使えるライブラリになりました。

対応バージョン

v0.29.1から

実装

Yup.object().shape({
  name: Yup.string().require(),
  parts: Yup.array().of(
    Yup.object.shape({
      name: Yup.string().required(),
      weight: Yup.number()
        .min(0)
        .test('maxWeight', '合計129.3Kg以上はNG', function(value) {
          if (value == null || value === '') return true;

          let robot = this.from[1].value; //<--------ここで参照
          let maxWeight = 0;
          robot.parts.forEach(part => {
            maxWeight += part.weight;
          });
          if (maxWeight > 129.3) {
            return false;
          }
          return true;
        }),
    })
  ),
});

こんな風に、this.from変数を使って上位の構造にアクセスできるようになりました。
from変数の中身はネストの深さに応じた配列となります。
例えばpart「頭」のweightを編集中の場合、

this.from[0].valueの中身は

{name: '', weight: 30 },

this.from[1].valueの中身は

{
    name: 'ドラえもん',
    parts: [
      { name: '', weight: 30 },
      { name: 'ボディー', weight: 39 },
      { name: '', weight: 30 },
      { name: '', weight: 30 },
    ],
  }

と、なります。ネストが深ければ、 from[2], from[3], ... と増えていきます。

訂正

当初 from[x] で、値を参照できるように当初書いてしまいましたが、 正しくは from[x].value です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2