Question

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

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;

Answer 1

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

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

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

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

Reactjs条件渲染问题

1 个答案: