为什么JavaScript渲染删除的组件

Question

我现在正在研究一个项目，我有一个由ANTD 菜单项目返回的组件。它有4个组件：home，用户名，登录和register> register：

const items = [
        {
          label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
          key: 'home',
          icon: <AppstoreOutlined />,
        },
        {
          label: 'Username',
          key: 'SubMenu',
          icon: <SettingOutlined />,
          children: [
            {
              label: 'Option 1',
              key: 'setting:1',
            },
            {
              label: 'Option 2',
              key: 'setting:2',
            },
            {
              label: <item onClick={logout}>Logout</item>,
              key: 'setting:3',
              icon: <LogoutOutlined />
            },
          ],
        },
        {
          label: <Link to='/register'>Register</Link>,
          key: 'register',
          icon: <UserAddOutlined />,
          style: { marginLeft: 1030},   // problem: hard-coded margin
        },
        {
          label: <Link to='/login'>Login</Link>,
          key: 'login',
          icon: <UserOutlined />,
          style: { marginLeft: 'auto'},
        },      
      ];
    
    useEffect(() => {
      if (user) {  // "user" is an object returned by userSelector
        items.splice(2, 2);
      }
    }, [user]);
    console.log(items);
    
    return <Menu  onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;

您可以看到，我是在此处使用使用> useeffect挂钩。如果未登录用户（so user === null），则不会执行useFeffect中的if语句；否则，登录 寄存器数组中的组件项目将被删除并隐藏，只剩下前2个。

从console.log（项目）;我们可以看到项目当前的内容。当用户登录时，它确实只有两个组件：

但是，在这种情况下，我们仍然可以看到登录和register在那里：

那么为什么JS和反应渲染删除的组件？

Answer 1

如果您需要重新渲染。您可以将数组存储在状态下。如果将数组存储在普通JavaScript变量中。 React不会重新渲染组件。像我在下面给出的那样尝试

const [items, setItems] = useState([
        {
          label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
          key: 'home',
          icon: <AppstoreOutlined />,
        },
        {
          label: 'Username',
          key: 'SubMenu',
          icon: <SettingOutlined />,
          children: [
            {
              label: 'Option 1',
              key: 'setting:1',
            },
            {
              label: 'Option 2',
              key: 'setting:2',
            },
            {
              label: <item onClick={logout}>Logout</item>,
              key: 'setting:3',
              icon: <LogoutOutlined />
          },
          ],
        },
        {
          label: <Link to='/register'>Register</Link>,
          key: 'register',
          icon: <UserAddOutlined />,
          style: { marginLeft: 1030},   // problem: hard-coded margin
        },
        {
          label: <Link to='/login'>Login</Link>,
          key: 'login',
          icon: <UserOutlined />,
          style: { marginLeft: 'auto'},
        },      
      ]);
    
    useEffect(() => {
      if (user) {  // "user" is an object returned by userSelector
        setItems(items.splice(2, 2));
      }
    }, [user]);
    console.log(items);
  
    return <Menu  onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;

Answer 2

您需要使用“ usestate”挂钩进行UI更新，例如，这些项目将被更新，但是UI不会更新。

import { useState } from 'react'
const [items, setItems] = useState([
    {
      label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
      key: 'home',
      icon: <AppstoreOutlined />,
    },
    {
      label: 'Username',
      key: 'SubMenu',
      icon: <SettingOutlined />,
      children: [
        {
          label: 'Option 1',
          key: 'setting:1',
        },
        {
          label: 'Option 2',
          key: 'setting:2',
        },
        {
          label: <item onClick={logout}>Logout</item>,
          key: 'setting:3',
          icon: <LogoutOutlined />
      },
      ],
    },
    {
      label: <Link to='/register'>Register</Link>,
      key: 'register',
      icon: <UserAddOutlined />,
      style: { marginLeft: 1030},   // problem: hard-coded margin
    },
    {
      label: <Link to='/login'>Login</Link>,
      key: 'login',
      icon: <UserOutlined />,
      style: { marginLeft: 'auto'},
    },      
  ]);

useEffect(() => {
  if (user) {  // "user" is an object returned by userSelector
    setItems((items) => {
        items.splice(2, 2);
        return items;
    }
  }
}, [user]);