使用 memoized React 组件重新绘制组件时出错

Question

这是我的导航栏组件。导出记忆的。

import * as PropTypes from 'prop-types';
import Style from './Navbar.module.scss';
import NavbarItem from './NavbarItem';
import React from 'react';

/**
 * @param items
 * @param type
 */
export default function Navbar({ items }) {
  return (
    <nav className={Style.main}>
      {items.map((item, i) => (
        <NavbarItem name={item.name} url={item.url} items={item.items} key={item.name + i} />
      ))}
    </nav>
  );
}

export const MemoizedNavbar = React.memo(Navbar, true);

Navbar.propTypes = {
  items: PropTypes.array.isRequired,
  type: PropTypes.string,
};

使用导航栏的页眉。

import React, { Fragment, useContext } from 'react';
import Logo from './Logo';
import { MemoizedNavbar } from '../Navbar/Navbar';
import Style from './Header.module.scss';
import { ListContext } from '../../lib/Context/ListContext';
import BrandsHelper from '../../lib/List/BrandsHelper';
import { Items } from '../../config/SiteNavbar';
import Svg from '../Utils/svg';

const {useState} = require("react");

export default function Header({ brand }) {
  const [lists, setLists] = useContext(ListContext);

  const listData = lists.lists[lists.currentListId];

  const [hamburgerMenuOpen, setHamburgerMenuOpen] = useState(false);


  const handleHamburgerClick = () => {
    setHamburgerMenuOpen(!hamburgerMenuOpen);
  }

  return (
    <header className={Style.header}>        
      <section className={Style.section}>
        <Logo brand={brandName} />
        <MemoizedNavbar items={Items} />

        <button className={Style.hamburgerButton} aria-label="Menu" onClick={handleHamburgerClick}>
          <span className={Style.hamburgerButtonClickable} />
        </button>

      </section>
    </header>
  );
}

当我点击 HambugerButton 时，出现以下错误：

如果我不使用 Memoized 组件，它工作得很好。

有什么问题吗？

Answer 1

export const MemoizedNavbar = React.memo(Navbar, true);

第二个参数应该是一个函数，例如：

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}

如果您不需要做任何特别的事情，只需删除第二个参数，React 将进行浅比较。

export const MemoizedNavbar = React.memo(Navbar);

使用 memoized React 组件重新绘制组件时出错

Error in Component re draw with memoized React component

reactjs

react-memo