如何在ejs中管理状态

Question

我正在尝试开发一个社交媒体Web应用程序。我正在使用ejs作为模板引擎。我目前只能添加朋友，取消朋友请求，确认朋友请求。一个人的个人资料上的按钮可以是“添加”好友”，“取消好友请求”，“取消好友”或“确认好友请求”。

现在我正在从mongodb中获取数据，并且在ejs中我正在使用if else块来更新按钮的状态。但这已经变得非常混乱。我正在寻找更好的方法。以下是凌乱的if else结构来更新按钮状态。

<%if(!userdata[0].friendRequests) {%>
                <%if(!userdata[0].pendingFriendRequests) {%>
                    <!-- <button class="btn waves-effect blue addFriend">Add Friend</button> -->
                    <%if(!userdata[0].friends)  {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                    <%}
                    else {%>
                        <%if(userdata[0].friends.length) {%>
                            <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                        <%}
                        else {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                        <%}%>
                    <%}%>

                <%}
                else {%>
                    <%if(userdata[0].pendingFriendRequests.length) {%>
                        <%if(!userdata[0].friends)  {%>
                            <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button>
                    <%}
                    else {%>
                        <%if(userdata[0].friends.length) {%>
                            <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                        <%}
                        else {%>
                            <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button>
                        <%}%>
                    <%}%>
                        <!-- <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button> -->
                    <%}
                    else {%>

                        <%if(!userdata[0].friends)  {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                    <%}
                    else {%>
                        <%if(userdata[0].friends.length) {%>
                            <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                        <%}
                        else {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                        <%}%>
                    <%}%>


                    <%}%>
                <%}%>

            <%} 
            else {%>
                <%if(userdata[0].friendRequests.length) {%>

                    <%if(!userdata[0].friends)  {%>
                        <button class="btn waves-effect blue cancelFriendRequest">Cancel Friend Request</button>
                <%}
                else {%>
                    <%if(userdata[0].friends.length) {%>
                        <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                    <%}
                    else {%>
                        <button class="btn waves-effect blue cancelFriendRequest">Cancel Friend Request</button>
                    <%}%>
                <%}%>

                    <!-- <button class="btn waves-effect blue cancelFriendRequest">Cancel Friend Request</button> -->
                <%}
                else {%>
                    <%if(userdata[0].pendingFriendRequests) {%>
                        <%if(userdata[0].pendingFriendRequests.length) {%>

                            <%if(!userdata[0].friends)  {%>
                                <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button>
                        <%}
                        else {%>
                            <%if(userdata[0].friends.length) {%>
                                <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                            <%}
                            else {%>
                                <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button>
                            <%}%>
                        <%}%>

                            <!-- <button class="btn waves-effect blue confirmFriendRequest">Confirm Friend Request</button> -->
                        <%}
                        else {%>
                            <%if(!userdata[0].friends)  {%>
                                <button class="btn waves-effect blue addFriend">Add Friend</button>
                        <%}
                        else {%>
                            <%if(userdata[0].friends.length) {%>
                                <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                            <%}
                            else {%>
                                <button class="btn waves-effect blue addFriend">Add Friend</button>
                            <%}%>
                        <%}%>
                        <%}%>
                    <%}
                    else {%>
                        <%if(!userdata[0].friends)  {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                    <%}
                    else {%>
                        <%if(userdata[0].friends.length) {%>
                            <button class="btn waves-effect blue unFriend">UNFRIEND</button>
                        <%}
                        else {%>
                            <button class="btn waves-effect blue addFriend">Add Friend</button>
                        <%}%>
                    <%}%>

                    <%}%>
                <%}%>
            <%}%>