(反应/还原)JSX 三元回退不起作用

Question

我得到了一个用户数组，它的状态一开始是空的：

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

在第一次装载时，我从端点(使用useEffect(获取用户，并对其进行渲染。

我想要加载所需时间的"Loading Users.."回退，但它不起作用。

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>
)}

我错过了什么？

Answer 1

数组-即使为空-仍然是truthy值，因此"Loading">div实际上从未渲染过。

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

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