Значение реквизита не совпадает с отправленным в функции обратного вызова

У меня есть компонент реакции как:

const CustomDatePicker = ({ errors, id, name, control, rules, getValues, minDate, maxDate, placeholder, required, defaultValue, ...rest }) => {
     console.log("required 1", name, required);
    const inputRef = React.useRef();
    const validateField = () => {
        console.log("required 2", required, name)
        if (required && !getValues(name)) {
            return false
        }
        else if (getValues(name)) {
            let dateObj = typeof (getValues(name)) == 'string' ? new Date(getValues(name)) : getValues(name)
            return !isNaN(dateObj);
        }
        else return true;
    }

    return (
        <div className="form-group custom-input-container">
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <Controller
                    name={name}
                    margin="normal"
                    fullWidth
                    variant="outlined"
                    onFocus={() => {
                        if (inputRef.current) {
                            inputRef.current.focus()
                        }
                    }}
                    defaultValue={defaultValue}
                    as={<KeyboardDatePicker
                        inputRef={inputRef}
                        className="custom-date-col"
                        fullWidth
                        autoOk
                        clearable
                        variant="inline"
                        inputVariant="outlined"
                        placeholder={placeholder}
                        minDate={minDate}
                        format="dd-MM-yyyy"
                        maxDate={maxDate}
                    />}
                    rules={{
                        validate: validateField
                    }}
                    control={control}
                    errors={errors}
                    {...rest}
                />
            </MuiPickersUtilsProvider>
        </div>
    );
};
export default CustomDatePicker;  

и родительский компонент использует вышеизложенное следующим образом:

export default function Dummy(props) {
  const [req,setReq]=useState(false);
  return (    
    <div className="FamilyDetails__emergency-form-row FamilyDetails__three-col-grid">
      <CustomDatePicker
        name={`marriageDate`}
        errors={props.errors}
        control={props.control}
        maxDate={new Date()}
        minDate={getMinDate()}
        placeholder={"dateOfMarriageLbl"}
        required={req}
        defaultValue={new Date()}
      />
    </div>
  );
}

Я использую вышеперечисленные компоненты в форме. Первоначально требуемая поддержка будет ложной, а позже она будет изменена на истинную. Когда я отправляю форму, вызывается метод validateField, и значение реквизита required в консоли печатается как false, тогда как исходное значение равно true. Затем консоль, напечатанная вне функции, печатает требуемое значение свойства как истинное. Значение требуемой опоры в функции validateField принимает начальное значение, с которым компонент изначально отображается. Пожалуйста, помогите мне в этом.


person sandeep reddy    schedule 22.07.2020    source источник
comment
вам, вероятно, следует предоставить подробную информацию о версии и, возможно, также о кодах и коробке.   -  person Bill    schedule 24.07.2020
comment
@Bill, пожалуйста, найдите codesandbox по адресу codesandbox.io/s/react-hook- form-date-picker-emeuy   -  person sandeep reddy    schedule 24.07.2020


Ответы (1)


Это похоже на проверку кеша react-hook-forms, и проблема была решена в последних версиях. найдите обсуждение здесь. Это решило мою проблему.

person sandeep reddy    schedule 09.01.2021