意外流動型誤差可能爲null的對象

Question

我學習流的類型，但我得到了很多，我不明白的問題。 其中之一是如下： 我初始化bill狀態我們null然後我從API獲取它，並用所獲取的票據更新狀態。我知道，如果this.state.bill是null我不能訪問它的任何財產，所以我只有this.state.bill訪問屬性的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 

我怎樣才能解決這個probleme？

Answer 1

流量支持「煉」類型，這意味着您可以使用控制語句一樣if使流意識到某個值的某個選項或無法使用。這讓這樣的代碼，以優良的工作：

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

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

（On Flow Try）

，因爲流量可以看出，.bill不能null因爲if語句成功。

未在你的情況發生的原因是，某些操作使流量必須回去做不確定。你的情況是

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

一般複雜的語句這樣可能莫名其妙地修改bill所以，這是null一次。在這種特定情況下它是顯而易見的，它不會出現一個人，但不是很明顯流動。你可以看到在這這種行爲太：

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。

Answer 2

由於this.state.bill的初始值爲空，所以不能指望this.state.bill.status以及其餘的工作。

你可以通過你的異步調用，這可能會工作得很好被突變的this.state.bill後的值，但初始值是空的問題。

爲了解決這個問題，你可以使用當值仍是空一些華而不實的短路語法：

<PaymentForm 
    bill={this.state.bill} 
    submitPayment={this.submitPayment} 
    billStatus={(this.state.bill || {}).status || null} 
/> 

這基本上意味着，billStatus將是要麼this.state.bill.status或null如果this.state.bill.status未定義

爲其他組件做同樣的事情。