美文网首页
Redux-Form错误使用 Validation 导致 Max

Redux-Form错误使用 Validation 导致 Max

作者: 葱大驴 | 来源:发表于2020-04-10 16:53 被阅读0次

    Code

    我在 Redux-Form 种写了一个改密码的Form,其中用了2个校验方式

    <Field
      name="password"
      label="New Password"
      component={CustomedComponent}
      validate={[Validatin.required]}
    /> 
    <Field
      name="rePassword"
      label="Re-confirm New Password"
      component={CustomedComponent}
      validate={[Validatin.required, Validation.changePwExpwMatch("password", 
        "New password is inconsistent")]}
    /> 
    

    第二个 Field 中,向 validation 中传入 changePwExpwMatch 这个方法, 这个方法定义在另外一个文件中,如下:

    export const Validation = {
      changePwExpwMatch: (matchField, msg) => (value, allValues) => {
        return value !== allValues[matchField]
        ? msg
        : undefined
      }
    }
    

    用于校验两次输入的密码是否一致。

    Error

    在这个页面中,当用户重复输入第二个Field,会导致系统崩溃,浏览器的 console 里面显示

    Maximum Update Depth Exceeded

    根据网上网友提供的讨论,原因可能是 validation 传入方法会导致React 的重复渲染,导致 React 多层 Update.

    Solution

    把动态传入参数的校验方法预先定义,就不会触发 (validation !== validation),也就不会重复渲染。

    const changePwExpwMatch =(matchField, msg) => (value, allValues) => {
        return value !== allValues[matchField]
        ? msg
        : undefined
      }
    export const Validation = {
      validate: changePwExpwMatch('password', 'New password is inconsistent')
    }
    
    <Field
      name="password"
      label="New Password"
      component={CustomedComponent}
      validate={[Validatin.required]}
    /> 
    <Field
      name="rePassword"
      label="Re-confirm New Password"
      component={CustomedComponent}
      validate={[Validatin.required, Validation.validate]}
    /> 
    
    

    References

    参考 stackoverflow 的讨论 :
    Redux Forms sometimes ends up with register/unregister infinite loop
    另外
    React Redux Form Error Using Validation - Maximum Update Depth Exceeded

    相关文章

      网友评论

          本文标题:Redux-Form错误使用 Validation 导致 Max

          本文链接:https://www.haomeiwen.com/subject/ywqdgctx.html