javascript - 将Flow类型与 map 功能一起使用

这是一些简单的React布局代码：

<div>
  {users.map(user => <AddUser user={user} key={user.id} />)}
</div>

我只是在调用AddUser组件的N个实例并将其传递一些值。以下是User对象的定义方式：

export type User = {
  id: number,
  email: string,
  role: string,
  firstName: string,
  lastName: string
}

在{user}实例上，我收到此错误：


  无法创建AddUser元素，因为null或未定义[1]为
  与属性User中的user [2]不兼容。
  并且在id的{user.id}属性上，我收到此错误：
  无法获取user.id，因为属性id缺少null或未定义[1]。


我该如何纠正？

更新：

为了完整性，这是@Mike Abeln提出的代码的有效解决方案：

<div>
  {users.map(user => {
    return (user !== undefined && user !== null)
    ? <AddUser user={user} key={user.id} classes={classes} state={fleetCustomerState} dispatch={dispatch} />
    : null
  })}
</div>

最佳答案

flow在这里告诉您的是，您应该检查以确保<AddUser />不是null或undefined

检查AddUser和null后返回undefined组件：

<div>
  {users.map(user => {
    return (user !== undefined && user !== null) ? <AddUser user={user} key={user.id} /> : null
  })}
</div>