Question

试图建立一个带有客户地址和电话号码的表格，但是API仅接受带有国家/地区代码的电话号码。所以我需要通过代码将其添加进来。

我已经在下面的代码中进行了尝试，但似乎总是遗漏了最后一个数字。

export default function ShippingAddressForm(props: Props) {
  let { address, onChangeAddress } = props;
  let [phoneState, setPhoneState] = useState<string>('');

  <TextInput
    label={t('Phone Number')}
    textContentType="telephoneNumber"
    value={phoneState}
    onChangeText={(number) => {
      setPhoneState(number)
      let phone = '+61' + phoneState
      onChangeAddress({ ...address, phone })
    }}
  />
}

在React上使用本机打字稿构建应用程序

Answer 1

设置状态是异步的，因此它不是立即的，它需要一些时间来更改组件的状态。在您的代码中，setPhoneState没有等待功能，因此电话值会在电话之前更新。

解决方案

使用数字代替phoneState

onChangeText={(number) => {
   setPhoneState(number)
   let phone = '+61' + number
   onChangeAddress({ ...address, phone })
}}

解决方案使用useEffect

     doSomething();
     let phone = '+61' + phoneState;
     onChangeAddress({ ...address, phone });
    }, [phoneState])

解决方案

在代码中使用添加时间延迟（错误的方法）

 onChangeText={(number) => {
       setPhoneState(number)
       setTimeout( ()=>null, 3000);
       let phone = '+61' + number
       onChangeAddress({ ...address, phone })
    }}

对文本输入做出反应的本国代码前缀

1 个答案: