javascript - (React/Redux) JSX 三元回退不起作用

Question

我得到了一组处于状态的用户，起初是空的：

const initialState = {
  users: [],
  loading: false,
}

在第一次挂载时，我从端点（使用useEffect）获取用户，然后渲染它们。

我想要一个“加载用户..”作为加载时间的后备，但它不起作用。

JSX 声明：

{usersFromState ? (
  <div className='usersContainer'>
    {usersFromState.map((user, i) => (
      <div className='messageBox' key={i}>
        user : {user.email}
      </div>
    ))}
  </div>
) : (
  <div className='loading'> Loading Users... </div>
)}

我错过了什么？

标签： javascriptreactjsredux

Answer 1

数组 - 即使是空的 - 仍然是真实值，因此“正在加载”的div 实际上从未呈现。

例如，您可以检查用户数组的长度。

{usersFromState.length > 0 ? ( ... ) : ( ... )}