Reactjs 如何使用网络数据流？

流是否检查运行时类型错误

假设我有一个react组件，它显示用户对象中的用户名和图标。 用户对象是

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}) => {
  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}结果也会出错

---

我错过什么了吗？。或者流只是用于源代码数据检查，在网络数据上使用它是错误的

仅根据提供的类型检查代码的使用是否正确。 无法确定网络数据的类型是否正确，但如果添加类型，它会假定正确

在您的情况下，您应该执行额外的检查，以确保它具有正确的类型。 如果没有，您可以添加默认值

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}