ネットワークデータのフローの使い方は？

Question

フローチェックでランタイムタイプのエラーがありますか？

私は、userNameとUserオブジェクトからのアイコンを表示する反応コンポーネントがあると言います。 ユーザオブジェクトは

type User: {| 
    name: string, 
    icon: { url: string } 
    |}, 

フローなしです。

const MyIcon = ({user}) => { 
    const name = user.name || '' 
    const icon = user.icon || {} 
    const url = icon.url || '' 

    return <Image src={url}> 
} 

// other component 
<MyIcon user={{}} 

これは私に間違いを与えません。しかし、これは私を失敗させることはありません。デフォルト値。

しかし、流れに、私はそれは私に素敵なエラーが発生します。この

type User = {| 
    name: string, 
    icon: { url: string } 
    |} 

const MyIcon = ({user}: {user: User}) => { 
    return <Image src={url}> 
} 

// other component 
<MyIcon user={{}} 

を行うことができます。

しかし、私のアプリはネットワークからユーザーデータを取得しています。ネットワーク要求はnullでもかまいません。または、間違った構造化オブジェクトをnullにしないでください。このような。

const user = await getUserFromNetwork() 
// what if user={name: { q: 1 }, icon: null} 

私のフローコードには実行時エラーがあります。私はこのようなコードを書き直さなければならない。

type User = {| 
    name: string, 
    icon: { url: string } 
    |} 

const MyIcon = ({user}: {user: User}) => { 
    const name = user.name || '' 
    const icon = user.icon || {} 
    const url = icon.url || '' 
    return <Image src={url}> 
} 

// other component 
const user = await getUserFromNetwork() 
// what if user={name: { q: 1 }, icon: null} 
<MyIcon user={user} 

フロー以外のバージョンと比較して、余分な作業が必要なので、フローを使用するポイントは何ですか？

ReactのdefaultPropsを使用しても、エラーが発生したuser={name: { q: 1 }, icon: null}の結果。

私に何か不足していますか？または、フローはソースコードのデータチェック用であり、ネットワークデータでの使用は間違っていますか？

Answer 1

フローは、コードの使用が正しいかどうか（提供されたタイプに応じて）のみチェックします。 ネットワークデータが正しいタイプであることは確かではありませんが、タイプを追加すると仮定しています。

あなたのケースでは、余分なチェックを行って正しいタイプのものであることを確認する必要があります。 そうでない場合は、たとえば、デフォルト値を追加できます。