네트워크 데이터에서 흐름을 사용하는 방법은 무엇입니까?

Question

흐름 검사 런타임 유형 오류가 있습니까?

사용자 개체와 사용자 개체의 아이콘을 표시하는 반응 구성 요소가 있다고 가정 해 보겠습니다. 사용자 객체 흐름없이

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

가 I이 물품이다.

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} 

유동적이지 않은 버전과 비교하면 그만한 추가 작업인데, Flow를 사용할 때의 요점은 무엇입니까?

React의 defaultProps를 사용하더라도 오류가있는 user={name: { q: 1 }, icon: null} 결과입니다.

나는 뭔가를 놓친가요?. 또는 흐름은 소스 코드 데이터 검사를위한 것이며 네트워크 데이터에서 사용하는 것은 잘못된 것입니까?

Answer 1

흐름은 코드 사용이 올바른지 (제공된 유형에 따라) 확인하십시오. 네트워크 데이터의 유형이 올바른지 확신 할 수 없지만 유형을 추가하는 경우에는이를 가정합니다.

귀하의 경우, 추가 점검을 수행하여 올바른 유형인지 확인해야합니다. 그렇지 않은 경우 인스턴스의 기본값을 추가 할 수 있습니다.