我应该在React组件中初始化一个null状态变量吗？

Question

我应该在React组件中初始化一个null状态变量吗？

我对React仍然有点新意,我发现它很棒,但目前有一件事情在我脑海中,我想知道该怎么想.

例如,我正在制作一个结帐组件,我有一个减少优惠券字段.

我将我的活动的当前价格传递给优惠券,以便它可以计算新的:

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

Run Code Online (Sandbox Code Playgroud)

然后显示:

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

Run Code Online (Sandbox Code Playgroud)

但是,例如,在reducedPrice某人使用优惠券之前,该变量为空.

问题是:设置reducedPrice初始状态是一种好习惯

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

Run Code Online (Sandbox Code Playgroud)

所有这些空变量对我来说似乎都是无用的,因为它们在默认情况下是空的,并且它们不需要 - 或者我还没有看到错误 - 要初始化,因为状态是一个对象,因此它可以在运行中创建.

我知道我会忘记其中的一些,所以我想知道我是否会根本不设置它们,以便如果我错过它就会明显地破坏它们.

未决问题:D

Answer 1

zur*_*fyx 5

将它们作为null或undefined将导致您获得相同的结果/错误，因为您很少会使用三重等于来比较其存在。

selectedCreditCardId ? something : else

Run Code Online (Sandbox Code Playgroud)

但话又说回来，同样的事情发生在true/ 上false，与其他类型（字符串、数字等）相反，你也很少使用三等号。

所以它完全相同：this.state = { isTall: false }，而不是根本没有它

isTall ? yes : no

仍然会给你相同的结果。（此示例是为您提供更好的链接上下文，我稍后将向您展示）

IMO，因为这是一个固执己见的问题
，将它们定义在顶部，而不是将它们分布在渲染方法中，将快速概述状态中的内容以及您的下一个状态。

做你做什么，只要确保一致。

您可能还想检查：

归档时间：	8 年，10 月前
查看次数：	5065 次
最近记录：	8 年，10 月前