将流式输入与地图功能结合使用

Question

下面是一些简单的 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} 实例中我收到此错误：

Cannot create AddUser element because null or undefined [1] is incompatible with User [2] in property user. and over the id property of {user.id} I'm getting this error: Cannot get user.id because property id is missing in null or undefined [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>

Answer 1

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

Return 检查 null 和 undefined 后的 AddUser 组件：

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

将流式输入与地图功能结合使用

Using Flow typing with the map function

javascript

reactjs

flowtype