道具的价值与回调函数中发送的价值不同

Question

我有一个反应组件：

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>
  );
}

我在表单中使用了以上组件。最初“required”prop 将是 false，然后它会被更改为 true。当我提交表单时，validateField 方法被调用并且控制台中的 required 属性值打印为 false，而原始值为 true。然后在函数外打印的控制台将“require”属性值打印为 true。 validateField 函数中 "required" 属性的值取组件最初渲染时的初始值。请帮我解决这个问题。

Answer 1

看起来react-hook-forms 缓存了验证，这个问题已经在最新版本中解决了。找到讨论 here。这解决了我的问题。

道具的价值与回调函数中发送的价值不同

Value of a props is not same as sent in the callback funtion

javascript

reactjs

react-hook-form