1

これに関する例はあまりないため、できる限りドキュメントに従っていますが、検証は反応的ではありません。

スキーマを宣言します:

import { Tracker } from 'meteor/tracker';
import SimpleSchema from 'simpl-schema';

export const modelSchema = new SimpleSchema({
  foo: { 
    type: String,
    custom() {
      setTimeout(() => {
        this.addValidationErrors([{ name: 'foo', type: 'notUnique' }]);
      }, 100);  // simulate async
      return false;
    }
  }
}, {
  tracker: Tracker
});

次に、コンポーネントでこのスキーマを使用します。

export default class InventoryItemForm extends TrackerReact(Component) {

  constructor(props) {
    super(props);

    this.validation = modelSchema.newContext();
    this.state = {
      isValid: this.validation.isValid()
    };
  }

  ...

  render() {
    ...
    const errors = this.validation._validationErrors;

    return (
      ...
    )
  }
}

そのため、検証を試みるたびにfoo、非同期のカスタム関数が呼び出され、適切な関数が呼び出されますが、が false であると想定されているaddValidationErrors場合、コンポーネントは再レンダリングされません。this.validation.isValid()

私は何が欠けていますか？

4

1 に答える 1

2

コードには実際には 2 つのエラーがあります。まずthis.addValidationErrors、正しい検証コンテキストを参照しないため、カスタム検証内で非同期に使用することはできません。次に、TrackerReactリアクティブなデータ ソース ( など.isValid) を関数内に登録renderするだけなので、アクセスするだけでは十分ではありません_validationErrors。したがって、それを機能させるには、名前付きの検証コンテキストを使用isValidし、レンダリング関数 (またはそれによって呼び出される他の関数) を次のように呼び出す必要があります。

検証で 

custom() {
  setTimeout(() => {
    modelSchema.namedContext().addValidationErrors([
      { name: 'foo', type: 'notUnique' }
    ]);
  }, 100);
}

コンポーネント

export default class InventoryItemForm extends TrackerReact(Component) {
  constructor(props) {
    super(props);

    this.validation = modelSchema.namedContext();
  }

  render() {
    let errors = [];
    if (!this.validation.isValid()) {
      errors = this.validation._validationErrors;
    }

    return (
      ...
    )
  }
}

非同期検証の詳細については、こちらを参照してください。

于 2016-09-01T12:28:44.447 に答える