从后端提取列表后，如何有条件地在列名中呈现？

Question

我有一个错误，我想在未经授权的用户提出特定请求时显示该错误。我希望管理员是唯一能够查看此屏幕的人（从数据库中删除用户的屏幕）。该部分工作正常，但它显示的文本作为每列的标题（ID、用户名、电子邮件），当我只希望显示未经授权的消息（对于未经授权的用户）时，所有这些文本都聚集在一起。我该如何解决这个问题？

BoardAdmin.jsx:

import React, {useState, useEffect} from 'react';
import UserService from '../../services/user.service';
import './styles/BoardAdmin.css';
const BoardAdmin = () => {
    const [content, setContent] = useState('');
    const [users, setUsers] = useState([]);
    useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
            }
        );
    }, []);
    return (
        <div className='page'>
            <header className='jumbotron'>
                <div className='column-names'>
                    <p>{content}</p>
                    <p className='user-id-column'>User ID</p>
                    <p className='username-column'>Username</p>
                    {/* <p>User Role</p> */}
                    <p className='user-email-column'>Email</p>
                </div>
                {users.map((user) => (
                    <ul className='user-list'>
                        <li class='user'>
                            <div>
                                <div class='info'>
                                    <span class='user-id'>{user.id}</span>
                                    <span class='name'>{user.username}</span>
                                    <span class='role'>{user.role}</span>
                                    <span class='email'>{user.email}</span>
                                    <img class='remove' src='https://i.imgur.com/CemzWSg.png' />
                                </div>
                            </div>
                            <div class='expand'></div>
                        </li>
                    </ul>
                ))}
            </header>
        </div>
    );
};
export default BoardAdmin;

Answer 1

您可以通过在列名称前面添加带有 content（您的错误消息）的呈现条件来修复它。

如果没有错误消息（content 为空），您将呈现列。否则，您只需将 content 呈现为错误消息显示

{!content && <>
   <p className='user-id-column'>User ID</p>
   <p className='username-column'>Username</p>
   {/* <p>User Role</p> */}
   <p className='user-email-column'>Email</p>
</>}

除此之外，我建议您应该有一个加载状态，以了解您的请求何时完成以进行合适的呈现

const [isLoading, setIsLoading] = useState(true) //initially, it's loading

然后设置加载状态

useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                setIsLoading(false); //the request is completed
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
                setIsLoading(false); //the request is completed
            }
        );
}, []);

在请求的等待期间，您可以渲染一个加载组件

//TODO: You can modify this loading rendering according to your UI
if(isLoading) {
  return <div className='page'>Loading...</div>
}

完全可能的变化

import React, {useState, useEffect} from 'react';
import UserService from '../../services/user.service';
import './styles/BoardAdmin.css';
const BoardAdmin = () => {
    const [content, setContent] = useState('');
    const [users, setUsers] = useState([]);
    const [isLoading, setIsLoading] = useState(true); //initially, it's loading
    useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                setIsLoading(false); //the request is completed
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
                setIsLoading(false); //the request is completed
            }
        );
    }, []);

    //TODO: You can modify this loading rendering according to your UI
    if(isLoading) {
       return <div className='page'>Loading...</div>
    }

    return (
        <div className='page'>
            <header className='jumbotron'>
                <div className='column-names'>
                    <p>{content}</p>
                    {!content && <>
                       <p className='user-id-column'>User ID</p>
                       <p className='username-column'>Username</p>
                       {/* <p>User Role</p> */}
                       <p className='user-email-column'>Email</p>
                    </>}
                </div>
                {users.map((user) => (
                    <ul className='user-list'>
                        <li class='user'>
                            <div>
                                <div class='info'>
                                    <span class='user-id'>{user.id}</span>
                                    <span class='name'>{user.username}</span>
                                    <span class='role'>{user.role}</span>
                                    <span class='email'>{user.email}</span>
                                    <img class='remove' src='https://i.imgur.com/CemzWSg.png' />
                                </div>
                            </div>
                            <div class='expand'></div>
                        </li>
                    </ul>
                ))}
            </header>
        </div>
    );
};
export default BoardAdmin;

从后端提取列表后，如何有条件地在列名中呈现？

How can I render in my column names conditionally AFTER the list is pulled from my backend?

javascript

reactjs

react-hooks