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

您可以通过在列的名称前添加一个呈现条件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;