javascript - 错误：在 formik 上使用反应输入掩码时超出了最大更新深度

Question

我正在尝试react-input-mask与 formik 绑定。但是，我在第一次击键时遇到错误。这是我尝试使用它的方式。如果我删除 react-input-mask 那么代码就像一个普通的文本字段但是如果我使用输入掩码那么只有我得到“最大更新深度”错误。可能是什么原因？

const InputMaskField = ({
  label,
  field,
  form,
  prepend,
  append,
  innerAppend,
  ...rest
}) => {
  const [active, setActive] = React.useState(false)
  const hasError =
    (get(form.touched, `${field.name}`) || get(form, 'submitCount') > 0) &&
    get(form.errors, `${field.name}`)
  return (
    <InputWrapper>
      <Label isActive={active}>{label}</Label>
      <InputMask {...rest}>
        {(inputProps) => {
          return (
            <>
              <TextInputWrapper isActive={active}>
                {prepend && <InputAddonItem prepend>{prepend}</InputAddonItem>}
                <InputAddonField
                  isActive={active}
                  hasError={hasError}
                  prepend={!!prepend}
                  append={!!append}
                  {...field}
                  {...inputProps}
                  onBlur={(e) => {
                    setActive(false)
                    field.onBlur(e)
                  }}
                  onFocus={() => setActive(true)}
                />
                {append && (
                  <InputAddonItem
                    isActive={active}
                    hasError={hasError}
                    {...field}
                    {...rest}
                  >
                    {append}
                  </InputAddonItem>
                )}
                {innerAppend && <InnerAppend>{innerAppend}</InnerAppend>}
              </TextInputWrapper>
            </>
          )
        }}
      </InputMask>
      {hasError && <Error>{hasError}</Error>}
    </InputWrapper>
  )
}

标签： javascriptreactjsformik