Redux 表单异步验证无限递归

Question

我在我的应用程序中使用 redux-form@7.0.4。在某些字段中，我需要动态定义验证函数。请注意，我需要 id 和 slice 来查找 values

中的正确字段

<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)]}
    />

当我这样定义 validateMaxSlice 时

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

或像这样内联

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

应用程序在呈现组件时进入无限循环。

问题是为什么以及如何解决它？

编辑：

感谢您的帮助！这是我的实现方式

容器部分：

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 尝试验证值，然后重绘以更新视图。反过来，这会创建一个新的验证函数并更改相关的道具值。

当您更改组件的 props 时，React 将触发 Field 的重新渲染。因此导致它再次重新验证，再次导致重新渲染。

纠正它的一种方法是为每个回调生成一个且仅一个版本，在适当的时候重用函数实例。

例如，您可以存储一个 this.validators 关联数组，然后将您的函数生成器更改为如下所示：

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

这样，验证器是即时创建的，但在需要的地方重复使用。

Redux 表单异步验证无限递归

Redux Form Async validation infinite recursion

reactjs

redux-form