Todavía soy un poco nuevo en React, y lo encuentro increíble, pero actualmente tengo una cosa en mente y me gustaría saber qué pensar al respecto.
Por ejemplo, estoy creando un componente de pago, donde tengo un campo de cupón de descuento.
Le paso el precio actual de mi evento al cupón para que calcule el nuevo:
{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}y luego mostrar:
<p className="lead"> Total : <span className="pull-right"> {this.state.reducedPrice ? ( <span> <s> {isFree ? 'Gratuit' : `${event.real_final_price * this.state.participants} €`} </s> {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> Pero, por ejemplo, la variable reducedPrice es nula hasta que alguien usa un cupón.
La pregunta es: ¿es una buena práctica establecer el reducedPrice el estado inicial?
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); }Todas estas variables nulas me parecen inútiles, ya que están vacías de forma predeterminada y no son necesarias, o todavía no he visto un error, para inicializarse porque el estado es un objeto, por lo que se puede crear sobre la marcha.
Sé que olvidaré algunos de estos, así que me pregunto si simplemente no los configuraría para que se rompa claramente si me pierdo uno.
Pregunta abierta :D
Tenerlos como null o undefined lo llevará a los mismos resultados / errores, ya que rara vez usará triple-igual para comparar su existencia.
selectedCreditCardId ? something : else Pero, de nuevo, sucede lo mismo con true / false , a diferencia de otros tipos (cadenas, números, ...), rara vez usas el triple-igual.
Entonces es exactamente lo mismo: this.state = { isTall: false } , que no tenerlo en absoluto
isTall ? yes : no
todavía le dará los mismos resultados. (este ejemplo es para brindarle un mejor contexto a los enlaces que le mostraré más adelante)
En mi opinión, ya que esa es una pregunta obstinada.
Tenerlos definidos en la parte superior, a diferencia de tenerlos distribuidos en el método de renderizado, le dará una visión general rápida de lo que hay en el estado y cuál será su próximo estado.
Haz lo que quieras, solo asegúrate de ser consistente.
También es posible que desee comprobar: