#javascript #arrays #if-statement #conditional-statements
Вопрос:
У меня есть список пользователей, который я отображаю в небольшой боковой панели. Существует вероятность того, что пользователей не может быть. Поэтому я хотел бы, чтобы на боковой панели было написано «нет», если нет пользователей. Я попробовал приведенный ниже метод, но, похоже, он все еще регистрирует пользователя, даже если его 0. Я пытался (user === null) , (user.length lt; 1) но, похоже, просто не могу этого понять.
{usersList.map((user) =gt; { if (!user) { return lt;h5gt;nonelt;/h5gt;; } else { return ( lt;h5 key={user} gt; lt;Link to={`/user/${user}`} style={{ textDecoration: "none"}} gt; {user} lt;/Linkgt; lt;/h5gt; ); } })} Комментарии:
1. Как
usersListопределяется и какова его ценность? В чем заключается ценностьuser?2. Вам нужно проверить длину
userListвместоuser, прежде чем запускать операцию с картой.3. @showdev Я буквально отфильтровал исходные данные только для множества пользователей. Поэтому, когда нет пользователей, это просто
[], но если есть пользователи["Bob", "Kim"]4. Если массив пуст, я бы не ожидал
map, что буду что-то делать.
Ответ №1:
Проверьте, больше ли длина массива 0: если да, отобразите список, в противном случае отобразите «нет».
Вы можете сделать это с помощью простого троичного оператора:
condition ? truthy : falsey {usersList.length gt; 0 ? ( usersList.map((user) =gt; ( lt;h5 key={user}gt; lt;Link to={`/user/${user}`} style={{ textDecoration: "none" }}gt; {user} lt;/Linkgt; lt;/h5gt; )) ) : ( lt;h5gt;nonelt;/h5gt; )} Комментарии:
1. Аааа, не знал, что вы можете использовать троичную функцию карты. Спасибо за урок
2. Вы можете поместить практически все, что угодно, в троичное условное
Ответ №2:
Вы можете использовать тернарный оператор:
{ userList?.length gt; 0 ? lt;h5 key={user} gt; lt;Link to={`/user/${user}`} style={{ textDecoration: "none"}} gt; {user} lt;/Linkgt; lt;/h5gt; : lt;h5gt;No Userslt;/h5gt; } или может использовать amp;amp;
{(!userList || userList?.length === 0) amp;amp; lt;h5gt;No Userslt;/h5gt;} {userList?.length gt; 0 amp;amp; lt;h5 key={user} gt; lt;Link to={`/user/${user}`} style={{ textDecoration: "none"}} gt; {user} lt;/Linkgt; lt;/h5gt;}