Next.js 两次渲染元素答案

【问题标题】：Next.js renders element twiceNext.js 两次渲染元素
【发布时间】：2022-11-08 22:34:11
【问题描述】：

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

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

Next.js 不仅呈现该元素，而且呈现来自该对象的第一个元素

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

也许它与下面这段代码中的 useState 和我的状态管理有关

渲染两次的组件。

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;

【问题讨论】：

我不确定为什么它会渲染Location 两次，但是您的 onClick 处理程序中有错误。 onClick 应该是一个函数，即onClick={() => select(i)}。否则，您的 select 函数会在渲染时立即调用。
@Araelath 在选择函数内我返回另一个函数，所以没关系
哈，你说得对，我现在明白了！ useCallback 通常不以这种方式使用，我不确定您为什么需要对 select 函数的常量引用。 select 每次调用时仍会返回不同的函数。不过，这可能与您的问题无关
@Araelath 使用 () => select() 不是一个坏主意，因为它每次都会创建新函数？
它每次都会创建一个新函数，但是您将它传递给div，因此它不会导致任何重新渲染。即便如此，你只需要担心函数的常量引用，以防你有一个非常昂贵的渲染函数，或者你需要一个稳定的引用以在 useEffect 依赖数组中使用。

标签： javascript reactjs next.js

【解决方案1】：

我只是动态导入了我的标签并设置了 SSR：false。

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

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

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

【讨论】：

【解决方案2】：

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

ActiveSelection = Selections[active]

我认为它不会解决您的问题，但它可能会让您更深入地了解导致它的原因。

【讨论】：

【解决方案3】：

这是与 next.js ssr 相关的奇怪行为/错误来修复它，将您的组件包装在这样的 div 中：

function MyApp({ Component, pageProps }: AppProps) {
  return <div id=#root><Component {...pageProps} /></div>;
}

【讨论】：