Question

我目前对收到的这两条错误消息一无所知。当我将“react-input-masks”库添加到我的代码中时，它们开始发生。代码本身按我的预期工作，但我不明白为什么我收到以下关于 refs 的错误（尤其是第一个）。

我的理解是，我尝试在功能组件中使用 refs 是罪魁祸首，我试图通过将 React.forwardRef() 包装到我的组件来修复它，但这并没有解决问题。我已经尝试过将 refs 包含到控制器和 InputMask 组件中的方法，但这并没有改变 refs。如果不是因为提到它的错误消息，我什至不确定控制器是否是问题。

以下是我的代码，我已将其缩减为似乎值得关注的领域。除此之外的所有工作都没有错误。

import React, {useRef} from 'react';
import { useForm, Controller } from "react-hook-form";
import InputMask from "react-input-mask";


const CreateAccountForm = React.forwardRef((props, ref) => {
  const {register, formState: { errors }, handleSubmit, watch, control} = useForm();
  const password = useRef({});
  password.current = watch("password", "");

  const onSubmit = (register) => {
    console.log(register)
  };

  return (
    
    <div className='sign-in-form'>
        <label> Date of Birth
          <Controller
            control={control}
            render={({ field: { ref, ...rest} }) => (
              <InputMask
                {...rest}
                mask="99/99/9999"
                placeholder="mm/dd/yyyy"
                inputRef={ref}
              />
            )}
            {...register('DOB', 
            { 
              required: 'date of birth missing',
              pattern: 
                {
                  value: /^\d{1,2}\/?\d{1,2}\/?\d{4}$/,
                  message: 'Invalid Date' 
                },
            })}
            name="DOB"
            defaultValue="" 
            type="date"
            />
        </label>
        <button type="submit">Create Account</button>
      </form>
    </div>

  )
})

export default CreateAccountForm;

提前感谢您的任何帮助。我尝试寻找解决方案，但在别处提供的答案中挣扎。

*编辑根据要求，将错误消息添加为下面的文本。

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef`.
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:30829:35)
    at label
    at form
    at div
    at http://localhost:3000/static/js/main.chunk.js:385:70
    at SessionContainer
    at div
    at App
console.<computed> @ index.js:1
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of InputElement which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at input
    at InputElement (http://localhost:3000/static/js/vendors~main.chunk.js:33079:30)
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:30829:35)
    at label
    at form
    at div
    at http://localhost:3000/static/js/main.chunk.js:385:70
    at SessionContainer
    at div
    at App
console.<computed> @ index.js:1

Answer 1

我设法找到了一个解决方案来消除我收到的两个错误（结果证明这两个错误并不相关，而是两个不同的问题）。

首先，'findDOMNode is deprecated in StrictMode...' 错误似乎是 react-input-mask 库的问题。该库不再处于活动状态，我发现执行相同操作但仍处于活动状态的替代库是 react-number-format。

有关“功能组件无法提供参考”的错误是控制器组件中“注册”的结果。注册已经由组件处理，不需要。相反，您应该使用“规则”来避免 forwardRefs 错误。这是修复我的代码的示例：

import React, {useRef} from 'react';
import { useForm, Controller } from "react-hook-form";
import NumberFormat from 'react-number-format';


const CreateAccountForm = (props, ref) => {
  const {register, formState: { errors }, handleSubmit, watch, control} = useForm();
  const password = useRef({});
  password.current = watch("password", "");

  const onSubmit = (register) => {
    debugger;
    console.log(register)
  };

  return (
    
    <div className='sign-in-form'>
    <label> Date of Birth
          <Controller
            innerRef={ref}
            control={control}
            render={({field}) => (
              <NumberFormat 
              {...field} 
              format="##/##/####" 
              allowEmptyFormatting 
              mask="_"
            />
            )}
            rules={{
              required: 'date of birth missing',
              pattern: 
                {
                  value: /^\d{1,2}\/?\d{1,2}\/?\d{4}$/,
                  message: 'Invalid Date' 
                },
            }}
            name="DOB"
            defaultValue="" 
            type="date"
            />
        </label>
        <button type="submit">Create Account</button>
      </form>
    </div>

  )
}

export default CreateAccountForm;

将“react-input-mask”库应用到我的“react-form-hook”表单组件时，接收“函数组件不能给出引用”错误

1 个答案: