反应文本输入的本地国家代码前缀

【问题标题】：react native country code prefix for text input反应文本输入的本地国家代码前缀
【发布时间】：2020-08-06 12:13:30
【问题描述】：

尝试设置一个包含客户地址和电话号码的表单，但 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 native typescript 在 Expo 上构建应用

【问题讨论】：

标签： javascript reactjs typescript react-native expo

【解决方案1】：

设置一个状态是异步的，所以它不是立即的，它需要一些时间来改变组件的状态。在您的代码中 setPhoneState 不是 await 函数，所以电话值会在电话之前更新。

解决方案

使用数字代替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 })
    }}

【讨论】：