JSX 条件渲染未按预期工作

Question

I'm having trouble with a conditional jsx statement where an element is not appearing properly unless I resize the window. Note: It works fine in dev mode. But doesn't display properly after build.

I'm trying to get it so I can display some navigation links if on desktop view and mobile menu if in mobile view.

My Main nav wrapper component is this -

const Nav = ({ image, branding, links, blog }) => {
    const [ size, setSize ] = useState(
        typeof window !== 'undefined' ? window.innerWidth : 1000
    );

    const handleSizeChange = (e) => {
        setSize((state) => e.target.innerWidth);
    };

    useEffect(
        () => {
            window.addEventListener('resize', (e) => handleSizeChange(e));
        },
        [ size ]
    );

    console.log(size);

    return (
        <NavWrapper>
            <Branding>
                <Link to="/">{!!image && <img src={image.url} alt="img" />}</Link>
                <Link to="/">{branding}</Link>
            </Branding>
            {size < 850 ? (
                <MobNav links={links} blog={blog} />
            ) : (
                <NavLinks links={links} />
            )}
        </NavWrapper>
    );
};

Which should give me this layout -

But instead I am getting this layout (until I resize the window to desktop and back to mobile) -

This is my NavLinks component -

const NavLinks = ({ links }) => {
    return (
        <NavLinksWrapper>
            {links.map((link) => {
                return (
                    <NavLink key={link.link._meta.uid}>
                        <Link to={`/${link.link._meta.uid}`}>{link.label}</Link>
                    </NavLink>
                );
            })}
        </NavLinksWrapper>
    );
};

And this is BottomMobNav component -

const BottomMobNav = ({ links, socialMedia, contact }) => {
    const [ open, setOpen ] = useState(false);
    const newLinks = [ { label: 'Home', link: { _meta: { uid: '/' } } }, ...links ];
    return (
        <MobNavWrapper>
            <div className="menu" style={{ left: open ? '0' : '-150%' }}>
                <MenuWrapper>
                    {newLinks.map((e, i) => {
                        if (e.label.toLowerCase() !== 'contact') {
                            return (
                                <Link to={`/${e.link._meta.uid}`} key={'mobNav ' + i}>
                                    <li
                                        style={{ height: `${75 / links.length}%` }}
                                        onClick={() => setOpen((state) => !state)}>
                                        {e.label}
                                    </li>
                                </Link>
                            );
                        }
                    })}
                </MenuWrapper>
            </div>
            <div className="icons">
                <i
                    className={`fa ${open ? 'fa-close' : 'fa-bars'} fa-2x`}
                    onClick={() => setOpen((state) => !state)}
                />
                <a href="https://www.google.com">
                    <i
                        className="fa fa-facebook-official fa-2x"
                        onClick={() => setOpen((state) => false)}
                    />
                </a>
                <Link to="/contact">
                    <i
                        className="fa fa-envelope fa-2x"
                        onClick={() => setOpen((state) => false)}
                    />
                </Link>
            </div>
        </MobNavWrapper>
    );
};

I don't understand why it would create the Navlinks component then put the bottomMobNav component inside it.

Any help would be appreciated. Thanks!

Answer 1

use effect options array should be empty to only be run on init, also you should remove this listener on unmount.

useEffect(
        () => {
            const listener  = (e) => handleSizeChange(e);
            window.addEventListener('resize', listener);
            return function(){ window.removeEventListener('resize', listener)   }
        },
        []
    );

Answer 2

I managed to fix this by removing all the js and simply handling the display using css media queries.