更改语言无法清除错误消息

Question

我正在制作一个带有 zod 验证模式的表单。 我的应用程序可以切换语言。 但是当我这样做时，错误消息不会重置并保持显示。我想我可以使用 useEffect，但我不知道在哪里以及如何使用。

export const phoneSchemaWithValidation = createUniqueFieldSchema(
  z.string().refine((data) => validatePhone(data).isValid, {
    message: 'Invalid phone number',
  }),
  'phone',
);

import { useEffect, useState } from 'react';
import { PhoneInput, validatePhone } from 'react-international-phone';
import { cn } from '@shared/utils';
import { useDescription, useTsController } from '@ts-react/form';

// import { useRouter } from 'next/router';
import { useStyles } from '../../../../hooks/useStyles';
import ErrorMessage from './ErrorMessage';
import Label from './Label';
import { inputClassNames } from './mapping';

import 'react-international-phone/style.css';

export function PhoneField(props: { required?: boolean }) {
  const { field, error } = useTsController<string>();
  const { label } = useDescription();

  const { rounded } = useStyles();
  return (
    <>
      <Label label={label} error={error} required={props.required} />
      <PhoneInput
        defaultCountry="fr"
        // defaultCountry={countryCode}
        value={field.value}
        onChange={field.onChange}
        className={cn(rounded, {
          'ring-1 ring-red-500': error?.errorMessage,
        })}
        inputClassName={inputClassNames}
      />
      <ErrorMessage {...error} />
    </>
  );
}

Answer 1

我不明白您的意思是切换手机输入的区域设置还是整个应用程序的区域设置。此解决方案适用于手机输入，但如果适用于整个应用程序，您必须显示您用于翻译的包。

这也可能不是最好的解决方案，因为它需要添加另一个状态。但我认为它应该有效。

1. 为所选国家/地区添加州/省/自治区/直辖市

 const [selectedCountry, setSelectedCountry] = useState<string>("fr")

2. 更新您的 onChange 处理程序以检查所选国家/地区是否已更改。

onChange={(phone, meta) => {
  if(meta.country.iso2 !== selectedCountry) {
    // reset error here
  }
  setSelectedCountry(meta.country.iso2);
  field.onChange(phone)
}}