Sollte ich eine Null-Statusvariable in einer React-Komponente initialisieren?

Question

Ich bin noch ein bisschen neu zu React, und ich finde es großartig, aber eine Sache ist momentan in meinen Gedanken und ich würde gerne wissen, was ich davon halten soll.

Zum Beispiel mache ich eine Checkout-Komponente, wo ich ein Reduktions-Coupon-Feld habe.

gebe ich den aktuellen Preis von meiner Veranstaltung zum Coupon, so dass es die neue berechnen kann:

{this.state.showCouponField ? (
    <CouponForm 
    validateCoupon={(coupon) => this.setState({ coupon: coupon })} 
    initialValue={this.state.coupon ? this.state.coupon.token : ''} 
    initialPrice={this.state.event.final_price} 
    setReducedPrice={(reducedPrice) => this.setState({ reducedPrice })} 
    /> 
) : null} 

und dann Anzeige:

<p className="lead"> 
    Total : 
    <span className="pull-right"> 
    {this.state.reducedPrice ? (
     <span> 
     <s> 
      {isFree ? 'Gratuit' : `${event.real_final_price * this.state.participants} €`} 
     </s> 
     &nbsp; 
     {this.state.reducedPrice === 0 ? 'Gratuit' : `${this.state.reducedPrice/100 * this.state.participants} €`} 
     </span> 
    ) : (
     <span> 
     {isFree ? 'Gratuit' : `${event.real_final_price * this.state.participants} €`} 
     </span> 
    )} 
    </span> 
</p> 

Aber zum Beispiel die Variable reducedPrice null ist bis jemand einen Gutschein benutzt.

Die Frage ist: ist es eine gute Praxis, die reducedPrice den Ausgangszustand

constructor(props) { 
    super(props); 
    this.state = { 
    event: null, 
    creditCards: [], 
    selectedCardId: null, 
    addCreditCard: false, 
    participants: 1, 
    coupon: null, 
    total: 0, 
    error: null, 
    loading: false, 
    bookingId: null, 
    user: null, 
    showCardOptions: false, 
    showModal: false, 
    modalUrl: null, 
    }; 

    this.updatePaymentMeans = this.updatePaymentMeans.bind(this); 
} 

Alle diese null Variablen scheinen nutzlos für mich zu setzen, wie sie standardmäßig et leer sind, werden sie nicht benötigt - oder ich habe Noch ein Fehler zu sehen - initialisiert werden, weil der Zustand ein Objekt ist, so dass es im laufenden Betrieb erstellt werden kann.

Ich weiß, dass ich einige davon vergessen werde, also frage ich mich, ob ich sie nicht einfach so einstellen würde, dass es deutlich brechen würde, wenn ich einen vermisse.

Offene Frage: D

Answer 1

sie als null oder undefined werden Sie nach der gleichen Ergebnis/Bugs führen, da man selten Triple-gleich verwenden wird seine Existenz zu vergleichen.

selectedCreditCardId ? something : else 

Aber dann wieder, geschieht das Gleiche mit true/false, im Gegensatz zu anderen Typen (Strings, Zahlen, ...), man selten entweder die Triple-gleich verwenden.

es ist also genau das gleiche: this.state = { isTall: false }, als es überhaupt nicht mit

isTall ? yes : no

werden Sie immer noch die gleichen Ergebnisse liefern. (in diesem Beispiel ist, dass Sie besser Zusammenhang mit den Verbindungen zur Verfügung zu stellen ich Ihnen später zeigen werde)

IMO, da dies eine eigenwillige Frage ist
Nachdem sie an der Spitze definiert, im Gegensatz sie das verteilt zu haben, machen Methode, gibt einen schnellen Überblick darüber, was in dem Zustand ist und was Ihr nächster Zustand sein wird.

Tun Sie, was Sie tun, stellen Sie nur sicher, konsequent zu sein.

Sie können auch prüfen wollen:

• https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/containers/About/About.js
• https://github.com/fbsamples/f8app/blob/master/js/login/LoginScreen.js
• https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js
• http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/