javascript - Should I initialize a null state variable in a React component? - Stack Overflow

admin管理员组

文章数量:1313347

I am still a bit new to React, and I find it awesome, but one thing is currently on my mind and I would like to know what to think of it.

For instance, I am making a checkout ponent, where i have a reduction coupon field.

I pass the current price of my event to the coupon so that it can calculate the new:

{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}

and then display:

<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>

But for instance, the variable reducedPrice is null until someone uses a coupon.

The question is : is it a good practice to set the reducedPrice the initial state

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);
}

All these null variables seem useless to me as they are empty by default et they are not needed - or I have yet to see a bug - to be initialized because the state is an object so it can be created on the fly.

I know I will forget some of these, so I wonder if I would simply not set them so that it would clearly break if I miss one.

Open question :D

I am still a bit new to React, and I find it awesome, but one thing is currently on my mind and I would like to know what to think of it.

For instance, I am making a checkout ponent, where i have a reduction coupon field.

I pass the current price of my event to the coupon so that it can calculate the new:

{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}

and then display:

<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>

But for instance, the variable reducedPrice is null until someone uses a coupon.

The question is : is it a good practice to set the reducedPrice the initial state

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);
}

All these null variables seem useless to me as they are empty by default et they are not needed - or I have yet to see a bug - to be initialized because the state is an object so it can be created on the fly.

I know I will forget some of these, so I wonder if I would simply not set them so that it would clearly break if I miss one.

Open question :D

• javascript
• reactjs

Share Improve this question Follow asked Jan 6, 2017 at 9:54 Florent DestremauFlorent Destremau 65311 gold badge55 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Having them as null or undefined will lead you to the same results / bugs, since you will rarely use triple-equal to pare its existence.

selectedCreditCardId ? something : else

But then again, the same thing happens with true / false, contrary to other types (strings, numbers, ...), you rarely use the triple-equal either.

So it's exactly the same to: this.state = { isTall: false }, than not having it at all

isTall ? yes : no

will still give you the same results. (this example is to provide you better context to the links I'll show you later)

IMO, since that is an opinionated question
Having them defined at the top, contrary to having them spread over the render method, will give a quick overview on what's in the state and what your next state will be.

Do what do you, just make sure to be consistent.

You might also want to check:

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

本文标签： javascriptShould I initialize a null state variable in a React componentStack Overflow