Reactjs条件渲染问题答案

【问题标题】：Reactjs conditional Rendering issueReactjs条件渲染问题
【发布时间】：2020-12-31 02:02:54
【问题描述】：

您好，我在根据变量是否具有值来渲染一些反应组件时遇到问题，无论使用 !user 还是 user ，它似乎根本不渲染 redux 似乎在它为 null 或有值的情况下工作正常，但是当状态在 null 和一个值之间变化时，我仍然看不到任何一个图标 nthat 是要渲染的

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;

【问题讨论】：

请在您的问题中添加代码，即使您无法正确格式化。有人可能会通过编辑您的问题来修复格式来提供帮助。
啊好的谢谢你我现在就做
请分享mwe

标签： reactjs react-native

【解决方案1】：

啊，我相信问题是在 useSelector 行上我没有用 {} 包装用户变量。错误在这里找到：

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

修复也像这样将 {} 添加到用户变量

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

【讨论】：