Question

我仍然对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}

然后显示：

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

但是，例如，变量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);
}

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

我知道我会忘记其中的一些，所以我想知道我是否会根本不设置它们，以便在我错过它时它会明显破坏。

公开提问：D

Answer 1

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

selectedCreditCardId ? something : else

然而，同样的事情发生在true / false，与其他类型（字符串，数字......）相反，你很少使用三重相等。

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

isTall ? yes : no

仍会给你相同的结果。 （这个例子是为你提供更好的上下文链接，我稍后会告诉你）

IMO，因为那是一个自以为是的问题将它们定义在顶部，与将它们分布在渲染方法上相反，将快速概述状态中的内容以及下一个状态。

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

您可能还想查看：

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

1 个答案: