0
407
Views¿Por qué javascript representa los componentes eliminados?
Chicos, estoy trabajando en un proyecto ahora y tengo un componente que devuelve el elemento del Menu antd. Tiene 4 componentes: Home , Nombre de Username , Inicio de Login y 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} />; Como puede ver, estoy usando un gancho useEffect aquí. Si el usuario no ha iniciado sesión (entonces user === null ), las declaraciones if en useEffect no se ejecutarán; de lo contrario, los componentes Login y Register en los items de la matriz se eliminarán y ocultarán, y solo quedarán los dos primeros.
Desde console.log(items); podemos ver cómo son items actualmente. Cuando un usuario inicia sesión, solo tiene dos componentes: 
Sin embargo, todavía podemos ver que Login y Register están ahí en tal circunstancia: 
Entonces, ¿por qué JS y React procesan los componentes eliminados?
2 answers
Answer question0
Debe usar el enlace "useState" para actualizar la interfaz de usuario; en su ejemplo, los elementos se actualizarán, pero la interfaz de usuario no se actualizará.
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]);0
Si necesita que se realice el renderizado. Puede almacenar la matriz en un estado. Si almacena la matriz en la variable javascript normal. React no volverá a renderizar el componente. Intenta como te doy a continuación,
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} />;