typescript - 如何使用 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.
我查看了如何使用打字稿设置状态,发现以下内容https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native#adding-一个组件,他们使用接口状态和道具。我不能为这个组件制作自己的界面吗?我见过其他人做 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,
},
});
解决方案
PickerData 类型可能是错误的。这种类型是从哪里来的?我查看了插件问题,有人要求对 lib 提供 TypeScript 支持。
无论如何,也许将 pickerData 更改为
export interface IRegisterScreenState{
cca2? : string;
pickerData? : any;
}
并查看 getPickerData 函数返回什么。然后,您可以为该函数返回的任何内容定义适当的类型。
我还注意到你打电话给
this.phoneInputRef.current.getPickerData()
文件说
this.phone.getPickerData()
但我不确定这是否重要
推荐阅读
- mongodb - Mongoose 在 findByIdAndUpdate() 上将所有嵌套字段更新为 null
- javascript - 多个过滤器,一个 onChange 函数
- html - 为什么单击 2 次后更新面板正常工作
- angularjs - AngularJS 发布 sitemap.xml
- arrays - 如何在VB中附加一个二维数组和一个一维数组?
- c++ - C++ 程序太慢而且似乎不起作用?
- json - ORACLE APEX 如何从客户端上传 JSON 文件?
- media-queries - phonegap 升级后视口尺寸减小
- c# - 模态仅显示在 gridview 的第一条记录上
- google-cloud-platform - GCP:Datalab 笔记本 - 源存储库