通过 map function 使用流类型

Question

Here's some simple React layout code:

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

I'm simply calling N instances of an AddUser component and passing it some values. Here's how the User object is defined:

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

Over the {user} instance I'm getting this error:

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].

How should I correct this?

UPDATE:

In the interest of completeness, here's the working solution of the code proposed by @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

what flow is telling you here is that you should check to make sure that <AddUser /> is not null or undefined

Return the AddUser component after checking against null and undefined :

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