如何使用 react native 和 typescript 设置状态？答案

【问题标题】：How can I set a state with react native and typescript?如何使用 react native 和 typescript 设置状态？
【发布时间】：2020-02-18 15:28:40
【问题描述】：

我刚开始使用 react native，我正在尝试使用 typescript。我正在尝试设置我的状态，但它给了我以下错误。

Argument of type '{ pickerData: PickerData; }' is not assignable to parameter of type 'IRegisterScreenState | ((prevState: Readonly<IRegisterScreenState>, props: Readonly<IRegisterScreenProps>) => IRegisterScreenState | Pick<...>) | Pick<...>'.
  Type '{ pickerData: PickerData; }' is not assignable to type 'Pick<IRegisterScreenState, "pickerData">'.
    Types of property 'pickerData' are incompatible.
      Type 'PickerData' is missing the following properties from type 'ReactNativePhoneInput<typeof TextInput>': isValidNumber, getNumberType, getValue, getFlag, and 14 more.

我查看了如何使用 typescript 设置状态，并找到了以下https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native#adding-a-component，他们在其中使用了接口 State 和 Props。我不能为这个组件制作自己的界面吗？我见过其他人做 IState 和 IProps。否则我不知道是什么导致了我的错误。错误来自以下行this.setState({pickerData: this.phoneInputRef.current.getPickerData()});

import * as React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {Button} from 'react-native-elements';

import PhoneInput from 'react-native-phone-input';
import ReactNativePhoneInput from 'react-native-phone-input';
import PickerData from 'react-native-phone-input';
// import CountryPicker from 'react-native-country-picker-modal';

export interface IRegisterScreenProps {

}

export interface IRegisterScreenState{
  cca2? : string;
  pickerData? : PickerData;
}

export default class RegisterScreen extends React.Component<IRegisterScreenProps, IRegisterScreenState> {

  private phoneInputRef = React.createRef<ReactNativePhoneInput>();

  constructor(props:IRegisterScreenProps) {
    super(props);
    this.onPressFlag = this.onPressFlag.bind(this);
    this.selectCountry = this.selectCountry.bind(this);
    this.submitPhoneNumber = this.submitPhoneNumber.bind(this);
    this.state = {
      cca2: 'US',
    };
  }

  componentDidMount() { 
    if (this.phoneInputRef.current) 
      this.setState({pickerData: this.phoneInputRef.current.getPickerData()}); 
  }

  onPressFlag() {
    // this.countryPicker.openModal();
    console.log(this.phoneInputRef.current);
  }

  selectCountry(country:IRegisterScreenState) {
    if(this.phoneInputRef.current)
      this.phoneInputRef.current.selectCountry(country.cca2.toLowerCase());
    // this.setState({ cca2: country.cca2 });
  }

  public render(): JSX.Element
  {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Tempp</Text>
        <PhoneInput ref={this.phoneInputRef} onPressFlag={this.onPressFlag}/>
        <Button title="Submit" onPress={this.submitPhoneNumber} containerStyle={styles.submitButton} />
      </View>
    );
  }

  private submitPhoneNumber() : void
  {
    console.log(this.phoneInputRef);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 50,
    margin: 30,
  },
  phoneNumberInput:{
    width: 300,
  },
  submitButton:{
    width: 150,
    margin: 25,
  },
});

【问题讨论】：

标签： typescript react-native

【解决方案1】：

PickerData 类型可能是错误的。这种类型是从哪里来的？我查看了插件问题，有人要求对 lib 提供 TypeScript 支持。

无论如何都可以将pickerData更改为

export interface IRegisterScreenState{
  cca2? : string;
  pickerData? : any;
}

并查看 getPickerData 函数返回什么。然后，您可以为该函数返回的任何内容定义适当的类型。

我也注意到你打电话来了

this.phoneInputRef.current.getPickerData()

文档说

this.phone.getPickerData()

但我不确定这是否重要

【讨论】：