Reduxフォーム非同期検証無限再帰

Question

私のアプリケーションではredux-form@7.0.4を使用します。いくつかのフィールドがあり、私は動的に検証関数を定義する必要があります。私はこの

validate={[number, (value, values) => { 
const min = values["participation-card-" + id + "-slice-" + slice + "-min"]; 
    return min >= value ? "Invalid slice" : undefined;}] 

のようなこの

const validateMaxSlice = (slice, id) => (value, values) => { 
    const min = values["participation-card-" + id + "-slice-" + slice + "-min"]; 
    return min >= value ? "Invalid slice" : undefined; 
}; 

またはインラインのようなvalidateMaxSliceを定義するとき、私は値

<Field 
    component={SemanticFormField} 
    as={Input} 
    placeholder="From" 
    name={"participation-card-" + id + "-slice-" + slice + "-min"} 
    validate={[number]} 
    /> 
<Field 
    component={SemanticFormField} 
    as={Input} 
    placeholder="to" 
    name={"participation-card-" + id + "-slice-" + slice + "-max"} 
    validate={[number, validateMaxSlice(slice, id)]} 
    /> 

に正しいフィールドを探すためにIDとスライスが必要であることを 注意

コンポーネントをレンダリングすると、アプリケーションは無限ループに入ります。

質問はなぜそれを修正するのですか？

編集：

はあなたの助けをありがとう！ここで私はそれを

容器部品の実装方法である：

createSlice() { 
    const id = uuidv4(); 
    return { 
     id, 
     validators: (value, values) => { 
      const min = values["participation-card-" + this.props.id + "-slice-" + id + "-min"]; 
      return valSup(value, "Tranche incorrecte")(min); 
     }, 
    }; 
} 

addParticipationSlice() { 
    let participationSlices = this.state.participationSlices; 

    participationSlices.push(this.createSlice()); 

    this.setState({ 
     participationSlices, 
    }); 
} 

シーン一部：

<Field 
    component={SemanticFormField} 
    as={Input} 
    name={"participation-card-" + id + "-slice-" + slice.id + "-max"} 
    size="mini" 
    width={7} 
    validate={[number, slice.validators]} 
/> 

Answer 1

あなたはその場でバリデータを作成しているとして、それは新しいバリデータのインスタンスにそれを再描画するたびに作成します。

最初の再描画で、Reactを実行して値を検証し、次に再描画してビューを更新します。これにより、新しい検証関数が作成され、関連する小道具の値が変更されます。

プロップをコンポーネントに変更すると、反応するとフィールドの再描画がトリガーされます。したがって、再検証を再度引き起こし、再レンダリングを再度引き起こします。

修正する方法の1つは、必要に応じて関数インスタンスを再利用して、各コールバックのバージョンを1つだけ生成することです。あなたが例えばthis.validators連想配列を格納することができ

は、このような何かにあなたのファンクションジェネレータを変更：

validateMaxSlice(slice, id) => { 
    if (!this.validators[`${slice}-${id}`]) { 
      this.validators[`${slice}-${id}`] = (value, values) => { ...Actual validation code... } 
    } 
    return this.validators[`${slice}-${id}`] 
} 

この方法は、バリデータはその場で作成されますが、彼らがする必要がどこに再利用されています。