React-Phone-Number-Input + React-Hook-Form：如何在控制器验证中获取当前国家代码？

Question

我正在使用react-phone-number-input库。 不需要输入电话号码，但如果该号码存在，我希望在发送表单之前对其进行验证。

如果提交表单时cellphone字段是原始的/未触及，则isValid接受undefined （有效状态）。

如果国家代码立即更改（没有实际输入号码）， isValid接受所选国家的呼叫代码（例如瑞典的+46 ）。 这仍然是一个完全有效的案例。

在isValid函数中访问时， phoneCountryCode始终保存先前选择的值。 因此，经过验证的电话号码和当前的国家代码之间总是存在差异。 我不确定问题是否是特定于库的，也许是我的错误。 我如何摆脱提到的差异？

我 在 CodeSandbox 上进行了复制。

import PhoneInput, {
  parsePhoneNumber,
  getCountryCallingCode
} from "react-phone-number-input";

const [phoneCountryCode, phoneCountryCodeSetter] = useState('DE');

<Controller 
  name="cellphone"
  rules={{
    validate: {
      isValid: value => {
        if(value) {
          const callingCode = getCountryCallingCode(phoneCountryCode); 
          if(! new RegExp(`^\\+${callingCode}$`).test(value)) {
            // The parsePhoneNumber utility returns null 
            // if provided with only the calling code
            return !!parsePhoneNumber(value);
          }
        }
        return true;
      }
    }
  }}
  control={control}
  render={({ field }) => (
    <PhoneInput 
      {...field}
      onCountryChange={(v) => phoneCountryCodeSetter(v)}
      limitMaxLength={true}
      international={true}
      defaultCountry="DE"
    />
  )}
/>

Answer 1

这是一个特定的反应，图书馆没有错。 React 从不立即更新状态，React 中的状态更新是异步的； 当请求更新时，不能保证会立即进行更新。 然后更新函数将更改加入到组件状态，但反应可能会延迟更改。

例如：

const [age, setAge] = useSate(21);
const handleClick = () => {
    setAge(24)
    console.log("Age:", age);
}

您将在控制台中看到 21 登录。

这就是 react 的工作原理。 在您的情况下，当您更改国家/地区时，此“onCountryChange”事件会触发更新功能以更新状态并验证电话号码，但状态尚未更新，这就是它选择以前的 countryCode 值的原因（在此处进行控制台日志）。

为了更清楚地理解这一点，请将此代码放入您的组件中。

useEffect(() => {
    console.log("useEffect: phoneCountryCode", phoneCountryCode);
  }, [phoneCountryCode]);


console.log(phoneCountryCode, value); // inside isValid()

更新 phoneCountryCode 值时将调用 useEffect 回调，并且将在状态更新之前调用 isValid() 中的 console.log。

希望这是有道理的。 编码快乐！！