× TypeError：无法读取未定义的属性“地图”。 发现错误

Question

Can anyone pls help me out with this problem?

const Users = ({ users, loading }) => {
  if (loading) {
    return <Spinner />
  } else {
    return (
      <div style={userStyle}>
        {users.map((user) => (
          <UserItem key={users.id} user={user} />
        ))}
      </div>
    )
  }
}

Answer 1

use conditional operator && on before map

const Users = ({ users, loading }) => {
  if (loading) {
    return <Spinner />
  } else {
    return (
      <div style={userStyle}>
        {users && users.map((user) => (
          <UserItem key={user.id} user={user} />
        ))}
      </div>
    )
  }
}

Answer 2

Inside the map, you should use user not users so the code will be

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

Because, you are passing user as a argument for callback function not users.