[英]relation between reactjs ,setState, Interface props and Interface state with respect to typescript , how can I use setState?
I have never used Typescript, Trying to understand how this works我从未使用过 Typescript,试图了解它是如何工作的
This problem is very basic and may be simple but I didn't find any resource only which can help me with this.这个问题非常基本,可能很简单,但我没有找到任何可以帮助我解决这个问题的资源。
Problem: I want to setState the StationDefs which is not present in StationListState but present in StationListProps, do I need to add it in the StationListState?问题:我想设置 StationListState 中不存在但存在于 StationListProps 中的 StationDefs,我需要将其添加到 StationListState 中吗? or Import it somehow from Station.ts and it will work
或者以某种方式从 Station.ts 导入它,它会工作
when I try to set the state in componentDidMount it gives me following error当我尝试在 componentDidMount 中设置 state 时,出现以下错误
Argument of type '{ StationDefs: any;
'{ StationDefs: any; 类型的参数}' is not assignable to parameter of type 'StationListState |
}' 不可分配给 'StationListState | 类型的参数((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) |
((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'.
选择<...>'。 Object literal may only specify known properties, and 'StationDefs' does not exist in type 'StationListState |
Object 文字可能只指定已知属性,并且类型“StationListState”中不存在“StationDefs” | ((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) |
((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'.ts(2345)
选择<...>'.ts(2345)
I have 5 files as below我有 5 个文件如下
class StationListComponent extends React.Component < StationListProp, StationListState > { constructor(props: StationListProp) { super(props); this.state = { stationOnline: false, stationId: 0, appId: 0, activities: { selectedRow: [], } } } //I want to add following method to fetch data and allocate response to stationDefs componentDidMount() { //want to fetch data, which has Json objectArray with StationDefs content //how can i setState StationDef here? let data = [obj1, obj2, obj3]; this.setState({ stationDefs: data }); } render() {} }
interface ActivitiesType { selectedRow: Array < number | string >; } export interface StationListState { stationOnline: boolean; stationId: number appId: number; activities: ActivityType; }
//import {IStationDef} from Station.ts export interface StationListProp { stationDefs: IStationDef[]; }
import { IEnumInterface, IEntityObj } from 'index'; export interface IStationDef { StationVersionStatus: ICommonEnumInterface allowedUserTypes: ICommonEnumInterface; appDef? : IEntityObject; appId? : number; timestamp: string; }
export interface IEnumInterface { stationVersionId: number; stationDescription? : string; stationName: string; } export interface IEntityObj { id: number; name: string; type? : ICommonEnumInterface; }
export interface StationListState {
StationOnline: boolean;
stationId: number
appId: number;
Activities: ActivityType;
}
Can you change StationOnline to stationOnline and Activities to activities?能否将 StationOnline 改为 stationOnline,将 Activities 改为活动?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.