如何解决“Prop `id` 不匹配。服务器：“react-tabs-30”客户端：“react-tabs-0”控制台问题？

Question

我正在尝试在 next.js 中的下一个选项卡，但每次使用它时它都会显示一个控制台警告链接Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0"，我知道它不会影响我的应用程序，但它太烦人了。如何解决这个警告

<Tabs>
  <div className="tab-controler ml-sm-auto">
    <TabList className="tab-lists list-inline d-flex  flex-wrap nav mb-3" style={{ background: '#F8F8F8' }}>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Buy & Ship for me</Tab>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Ship for me</Tab>
    </TabList>
  </div>
  <TabPanel key={"tabpanel_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} handleRef={handleRef} />
      </div>
      <div className="col-lg-6 align-self-center">
        <div className="costcalc-empty-thumb text-center">
          <Image
            src="/assets/topNavbarPages/costCalculator.svg"
            alt="Cost Calculator"
            width="469"
            height="288"
          />
        </div>
      </div>
    </div>
  </TabPanel>
  <TabPanel key={"tabpanel_buy_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} handleRef={handleRef} />
      </div>
      <div className="col-lg-6 align-self-center">
        <div className="costcalc-empty-thumb text-center">
          <Image
            src="/assets/topNavbarPages/costCalculator.svg"
            alt="Cost Calculator"
            width="469"
            height="288"
          />
        </div>
      </div>
    </div>
  </TabPanel>
</Tabs>

正如你所看到的，我使用react-tabsfor tab，但我也在 React js 上工作，我使用相同的代码，但它没有显示此控制台警告。所以我的问题是为什么会发生这种情况？我该如何解决它？

Answer 1

在下一个js中我像这样修复了它

import dynamic from 'next/dynamic'
const Tabs = dynamic(import('react-tabs').then(mod => mod.Tabs), { ssr: false }) // disable ssr
import { Tab, TabList, TabPanel } from 'react-tabs'

它对我有用

Answer 2

我所知道的最好的解决方案就是将id自己设置在<Tabs>组件中。前任：<Tabs id={1}>

有关更多详细信息和示例，请参阅https://github.com/chakra-ui/chakra-ui/issues/4328#issuecomment-890525420 。

Answer 3

如您所知，NextJs 在服务器端生成代码。

此错误意味着服务器上的某些内容与客户端不同。如果客户端重新渲染，就会发生这种情况。

例如。

export default function Test(props) {
  return (
    <>
      <span>{props.name}</span>
    </>
  );
}

我有这个简单的Test组件。我将 name (1)属性从另一个组件发送到该Test组件。如果我在生成页面后使用 redux 在客户端中更改此名称（更改为 2）（例如，我的 redux 存储中有另一个名称），则会收到此错误。

道具与服务器“1”客户端“2”不匹配

为了解决这个错误，我需要在服务器中生成页面后不要使用 redux 更改此名称。数据只能在服务器渲染页面后通过用户操作进行更改。