予期せぬフロータイプのエラー、nullの可能性のあるオブジェクト

Question

フロータイプを学習していますが、わかりません。 これらのうちの1つは次のとおりです。 私はbill状態を初期化します。null私はAPIからフェッチし、フェッチされた請求書で状態を更新します。私は、このエラーを表示し、私はまだif(this.state.bill)フローを使用しましたが、

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

：私はthis.state.billがnullであれば、私はそのような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）

フローif文の実行が成功したので.billはnullすることができないことがわかりますので。

あなたのケースでは起こっていない理由は、特定の操作によってFlowが不確かに戻らなければならないということです。あなたのケースでは、再びnullたよう何とかbillを変更することができ、このような

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

一般的に複雑な文です。この特定の例では、それが起こらないことは人には明らかですが、フローには明らかではありません。完全に、例えばそれらを使用する前に、彼らはstateのオフ性質を引っ張ること

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）

一般的に、ほとんどの人は、このような場合に使用するアプローチがある：あなたはあまりにもこの中にその動作を確認することができます

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の初期値がnullであるため、this.state.bill.statusと残りの部分が動作するとは期待できません。

this.state.billの値を後で非同期呼び出しで変更している可能性がありますが、正常に動作する可能性がありますが、初期値はnullです。

は、この問題を解決するには、値はまだnullのときのために、いくつかの滑らかな短絡構文を使用することができます

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

これは基本的にthis.state.bill.statusが定義されていない場合billStatusはどちらかthis.state.bill.statusまたはnullになることを意味し

他のコンポーネントについても同じことを行います。