React开发中如何为空数组场景编写条件判断，空列表时显示提示

你的空状态判断逻辑写在了map的遍历回调中，当usersList本身是空数组时，map不会执行任何一次回调，所以空列表的判断永远不会触发。你之前尝试的user === null、user.length < 1都是针对单个用户项的判断，并非判断整个用户列表是否为空。

正确实现方式 #

先判断usersList数组的长度，空数组直接返回提示，非空再遍历渲染：

{
  // 也可以加!usersList兼容列表为undefined/null的场景
  usersList.length === 0 ? 
  <h5>none</h5> :
  usersList.map(user => (
    <h5 key={user}>
      <Link
        to={`/user/${user}`}
        style={{ textDecoration: "none"}}
      >
        {user}
      </Link>
    </h5>
  ))
}

如果你的业务场景中存在usersList有长度，但内部单个user是空值的情况，可以保留遍历内部对单个用户的判断：

{
  usersList.length === 0 ? 
  <h5>none</h5> :
  usersList.map(user => {
    if (!user) return null
    return (
      <h5 key={user}>
        <Link
          to={`/user/${user}`}
          style={{ textDecoration: "none"}}
        >
          {user}
        </Link>
      </h5>
    )
  })
}

内容的提问来源于stack exchange，提问作者HelpANoobOut