J'ai un formulaire long dans l'application TypeScript React, où nous devons masquer/afficher ou activer/désactiver en fonction de la valeur du statut.

export interface IState {
  Status: string;
  DisableBasicForm: boolean;
  DisableFeedbackCtrl: boolean;
  DisableTypeofReqCtrl: boolean;
  DisablePurposeCtrl: boolean;
  DisableDutyStation: boolean;
  DisableContractManager: boolean;
  DisableSection: boolean;
  DisableStartDate: boolean;
  DisableEndDate: boolean;
  DisableEstimateDate: boolean;
  DisableTotalBudget: boolean;
  DisableDeliveryDate: boolean;
  DisableWBS: boolean;
  DisableGrant: boolean;
  DisableGrantExpiry: boolean;
  DisableCaseSubmitter: boolean;
  DisablePreparedBy: boolean;
  DisablePreparedDate: boolean;
  ShowSupplyManagerPanel: boolean;
  ShowBudgetOwnerPanel: boolean;
  DisableSupplyManagerPanel: boolean;
  DisableBudgetOwnerPanel: boolean;
}

Alors qu'en classe j'ai besoin d'initier l'état dans le constructeur, quelle serait la meilleure façon de faire, je n'ai pas besoin d'initier une très variable présente dans IState?

public constructor(props: IGoodsProps) {
    super(props);
//What should be written here, minimal code required.
}
0
Durgesh 15 mars 2019 à 11:25

2 réponses

Meilleure réponse

Si vous êtes d'accord avec certaines propriétés ayant une valeur par défaut de undefined, vous pouvez les marquer comme facultatives dans IState en utilisant ?. Par exemple (je choisis certaines propriétés au hasard car je ne connais pas vos besoins) :

export interface IState {
  Status: string; // this one is required
  DisableBasicForm?: boolean; // this one is optional
  DisableFeedbackCtrl?: boolean;
  // ...
}

Ensuite, vous pouvez omettre les propriétés facultatives lors de l'initialisation de l'état dans le constructeur.

Quelles propriétés rendre facultatives ? Si vous souhaitez que l'un de vos booléens soit faux par défaut, dans de nombreux cas, undefined fonctionnera à la place car undefined est "falsey" en JavaScript. (peut entrer plus en détail si cela n'a pas de sens)

1
ecraig12345 16 mars 2019 à 02:20

Si vous déclarez implémenter IState, vous devrez lancer chaque propriété de IState (en fonction de votre logique) car les propriétés de IState ne sont pas marquées comme facultatives.

Exemple de pseudo-code:

public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       Status: status,
       DisableBasicForm: status.Status === 'yourValue',
       ... // initialize here
    } 
}

Si vous avez une valeur par défaut pour votre état passé en tant que prop, vous pouvez utiliser le destructeur d'objets :

public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       ...status,
       DisableBasicForm: status.Status === 'yourValue', // just overwrite this property with your logic
    } 
}

Vous pouvez également initialiser votre état en dehors du constructeur :

class Component extends React.Component<Props, State> {
  state: State = {
    Status: 'value',
    ... // initialize here
  }

  constructor(props: Props) {
   ...
  }

Si vous avez une logique partagée pour définir votre état et que vous ne voulez pas vous répéter, vous pouvez évaluer en utilisant React.useState mais votre composant doit être une fonction.

1
GibboK 15 mars 2019 à 16:36