Reactjs条件呈现问题

大家好，我在基于变量是否有值来呈现一些react组件时遇到了问题，不管变量是否有值，它似乎根本就不会呈现！使用用户或用户 redux在为null或有值的情况下似乎工作正常，但当状态在null和值之间变化时，我仍然看不到要渲染的任何图标

import React, {useState} from 'react';
import {Menu} from 'antd';
import {Link, useHistory} from 'react-router-dom'
import {
    MailOutlined, AppstoreOutlined,
    SettingOutlined, ShoppingOutlined,
    ShoppingCartOutlined, UserAddOutlined,
    UserOutlined, LogoutOutlined
} from '@ant-design/icons';
import {useDispatch, useSelector} from "react-redux";
import firebase from "firebase";

const {SubMenu, Item} = Menu;

const Header = () => {
    const [current, setCurrent] = useState("home");
    let dispatch = useDispatch()
    let user = useSelector((state) => ({...state}))
    let history = useHistory();
    console.log(user)
    const logout = () => {
        firebase.auth().signOut();
        dispatch({
            type: "logOff",
            payload: null,
        });
        history.push("/login");
    };
    const handleClick = (e) => {
        // console.log(e.key); this handles the click event for each button clicked, e is the current event of click
        setCurrent(e.key); // this sets the current button clicked, if home is clicked then css shows the on clicked design
    };

    return (

        <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">

            <Item key="home" icon={<AppstoreOutlined/>}>
                <Link to="/">Home</Link>
            </Item>
            {!user && (
                <Item key="register" icon={<UserAddOutlined/>} className="float-right">
                    <Link to="/register">Register</Link>
                </Item>
            )}
            {!user && (
                <Item key="login" icon={<UserOutlined/>} className="float-right">
                    <Link to="/login">Login</Link>
                </Item>
            )}
            {user && (
                <SubMenu>
                    {user && user.role === "admin" && (
                        <Item>
                            <Link to="/admin/dashboard">Dashboard</Link>
                        </Item>
                    )}
                    {user && user.role === "user" && (
                        <Item>
                            <Link to="/user/dashboard">Dashboard</Link>
                        </Item>
                    )}
                    <Item icon={<LogoutOutlined/>} onClick={logout}>
                        Logout
                    </Item>
                </SubMenu>
            )}
        </Menu>
    );
};

export default Header;

import React，{useState}来自“React”；
从“antd”导入{Menu}；
从“react router dom”导入{Link，useHistory}
进口{
MailOutlined，AppstoreOutlined，
设置概述，购物概述，
购物卡通外线，用户添加外线，
UserOutlined，logoutlined
}来自“@ant design/icons”；
从“react redux”导入{useDispatch，useSelector}；
从“firebase”导入firebase；
常量{子菜单，项}=菜单；
常量头=（）=>{
const[current，setCurrent]=useState（“home”）；
let dispatch=usedpatch（）
让用户=使用选择器（（状态）=>（{…状态}））
让历史=使用历史（）；
console.log（用户）
常量注销=（）=>{
firebase.auth（）.signOut（）；
派遣({
键入：“注销”，
有效载荷：空，
});
history.push（“/login”）；
};
常量handleClick=（e）=>{
//log（e.key）；它处理每个单击按钮的单击事件，e是当前的单击事件
setCurrent（e.key）；//设置当前单击的按钮，如果单击了home，则css显示单击后的设计
};
返回(
家
{！用户&&(
登记
)}
{！用户&&(
登录
)}
{用户&&(
{user&&user.role==“admin”&&(
仪表板
)}
{user&&user.role==“user”&&(
仪表板
)}
注销
)}
);
};
导出默认标题；

啊，我认为问题在于在useSelector行中，我没有用{}包装用户变量。在此处发现了该漏洞：

let user = useSelector((state) => ({...state}));

修复程序太复杂，无法向用户变量添加{}，如下所示

let {user} = useSelector((state) => ({...state}));

---

请在您的问题中添加代码，即使您无法将其正确格式化。有人可能会帮你修改问题的格式。啊，好的，谢谢你，我现在就做，请分享