javascript - 意外的流类型错误，可能为空对象

Question

我正在学习流程类型，但是我遇到了很多我不明白的问题。其中之一如下:我将 bill 状态初始化为 null，然后从 API 中获取它并使用获取的账单更新状态。我知道如果 this.state.bill 为 null 我无法访问其上的任何属性，因此我只能访问 this.state.bill 的属性code> 位于 if 语句中，如下所示:

class BillPaymentPage extends Component<*, props, *> {
  state = {
    bill: null,
  };

  componentDidMount() {
    this.fetchBill(this.props.id);
  }

  fetchBill = async (id: string) => {
    const bill = await getBillById(id, this.props.token).catch(e =>
      console.log(e),
    );
    this.setState({ bill });
  };
  ....
  render() {
    if (this.state.bill) {
      const totalPayment = this.state.bill.payment
        .reduce((acc, curr) => acc + curr.amount, 0)
        .toFixed(3);
      return (
        <Card>
          <PaymentForm
            bill={this.state.bill}
            submitPayment={this.submitPayment}
            billStatus={this.state.bill.status}
          />
          <h3>
            <FormattedMessage id="label.total" /> :{' '}
            <FormattedNumber
              value={this.state.bill.total}
              type="currency"
              currency="tnd"
            />
          </h3>
          <h3>
            <FormattedMessage id="label.totalPayment" /> :{' '}
            <FormattedNumber
              value={totalPayment}
              type="currency"
              currency="tnd"
            />
          </h3>
          <PaymentList
            deletePayment={this.deletePayment}
            payment={this.state.bill.payment}
          />
        </Card>
      );
    }
    return <Loader />;
  }
}

尽管我使用了 if(this.state.bill) 流程仍然显示此错误:

app/components/pages/bills/BillPaymentPage.js:99
 99:             billStatus={this.state.bill.status}
                                             ^^^^^^ property `status`. Property cannot be accessed on possibly null value
 99:             billStatus={this.state.bill.status}
                             ^^^^^^^^^^^^^^^ null

app/components/pages/bills/BillPaymentPage.js:104
104:               value={this.state.bill.total}
                                          ^^^^^ property `total`. Property cannot be accessed on possibly null value
104:               value={this.state.bill.total}
                          ^^^^^^^^^^^^^^^ null

app/components/pages/bills/BillPaymentPage.js:119
119:             payment={this.state.bill.payment}
                                          ^^^^^^^ property `payment`. Property cannot be accessed on possibly null value
119:             payment={this.state.bill.payment}
                          ^^^^^^^^^^^^^problem

我该如何解决这个问题？

Answer 1

Flow 支持“精炼”类型，这意味着您可以使用诸如 if 之类的控制语句来使 Flow 意识到某个值的某个选项可用或不可用。这使得这样的代码可以正常工作:

var obj = {
  state: {
    bill: (null: null | { payment: Array<string> }),
  },
};

if (obj.state.bill) {
  let str: string = obj.state.bill.payment[0];
}

( On Flow Try )

因为 Flow 可以看到 .bill 不能为 null，因为 if 语句成功。

您的情况没有发生的原因是某些操作使 Flow 必须回到不确定状态。在你的情况下是

const totalPayment = this.state.bill.payment
    .reduce((acc, curr) => acc + curr.amount, 0)
    .toFixed(3);

像这样的一般复杂语句可能以某种方式修改bill，使其再次null。在这个特殊的例子中，对于一个人来说这是显而易见的，它不会发生，但对于 Flow 来说却并不明显。您也可以在此看到该行为:

var obj = {
  state: {
    bill: (null: null | { payment: Array<string> }),
  },
};

if (obj.state.bill) {
  obj.state.bill.payment.reduce((acc, v) => v);

  let str: string = obj.state.bill.payment[0];
}

( On Flow Try )

通常，大多数人在这种情况下使用的方法是，他们在使用属性之前完全从 state 中提取属性，例如

var obj = {
  state: {
    bill: (null: null | { payment: Array<string> }),
  },
};


const { bill } = obj.state;

if (bill) {
  bill.payment.reduce((acc, v) => v);

  let str: string = bill.payment[0];
}

( On Flow Try )

这会正常工作，因为 bill 的值无法从非 null 更改为 null 非常明显。