Next.js 渲染元素两次

Question

在第一张图片上，您可以看到 next.js 渲染了该元素两次

我使用了表格并认为这是因为它们，但后来我尝试删除表格并放置突出部分但它仍然呈现两次所以我不知道它会是什么。

Next.js 不只渲染那个元素，而是渲染这个对象的第一个元素

const Sections = {
  1: Locations,
  0: Departments, // here it will render this one twice
  2: Managers,
  3: JobTitles,
};

可能与下面这段代码中的useState和我的statemanagment有关

呈现两次的组件。

const Locations = () => {
  return <div>hdjsad</div>;
};

// Tab Sections
import Locations from ''
import Departments from ''
import Managers from ''
import JobTitles from ''

import Icons from "../../Icons";
import TabItem from "./TabItem";

const tabs_text = ["Locations", "Departments", "Managers", "Job Titles"];

const Sections = {
  0: Locations, // THIS IS THE COMPONENT WHICH RENDERS TWICE
  1: Departments,
  2: Managers,
  3: JobTitles,
};

const SettingsTab = () => {
  const [active, setActive] = useState<number>(0);

  const select = useCallback((id: number) => {
    return () => setActive(id);
  }, []);

  const ActiveSection = useMemo(() => Sections[active], [active]);

  return (
    <section className={"mb-[24px]"}>
      <header
        className={"w-full flex items-center mb-[34px] pl-[24px] pr-[12px]"}
      >
        <div className={"flex space-x-[8px] !mb-0 overflow-x-scroll"}>
          {tabs_text.map((tab_text, i) => {
            return (
              <div onClick={select(i)} key={i}>
                <TabItem active={+active === i}>{tab_text}</TabItem>
              </div>
             
            );
          })}
        </div>

        <ImportLocationsAndFilter />
      </header>

      <ActiveSection />
      
    </section>
  );
};

APP.js

import { AppProps } from "next/app";

import "antd/dist/antd.css";

import "../styles/global.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Answer 1

我还不能发表评论，所以我会在这里发表评论。我知道 React 在官方文档中说永远不要依赖 UseMemo 或使用回调来实现功能。它说你应该创建你的应用程序，这样它就可以在没有它们的情况下工作，然后出于性能原因添加它们。如果你把 useMemo 拿出来放

会发生什么

ActiveSelection = Selections[active]

我认为它不会解决您的问题，但它可能会让您更深入地了解问题的根源。

Answer 2

我刚刚动态导入了我的标签并设置了 SSR: false。

它必须与 next.js 水合作用有关。

https://nextjs.org/docs/advanced-features/dynamic-import

dynamic(
  () => import(""),
  {
    ssr: false,
  }
);

Next.js 渲染元素两次

Next.js renders element twice

javascript

reactjs

next.js