Reactjs 如何解决；道具'id'不匹配。服务器："；react-tabs-30“；客户：“；react-tabs-0“；控制台问题？

我正在next.js中尝试next中的tab，但每次我使用它时，它都会显示一个控制台警告链接，这个

Prop`id`不匹配。服务器：“react-tabs-30”客户端：“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 tabs

，但我也使用了react js，其中我使用了相同的代码，但没有显示此控制台警告。所以我的问题是为什么会这样？我如何解决这个问题呢？

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

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

比如说

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

导出默认功能测试（道具）{
返回(
{props.name}
);
}

我有一个简单的

Test

组件。我将name（1）道具从另一个组件发送到这个

Test

组件。如果在生成页面后，在使用redux的客户端中将此名称（改为2）（例如，我在redux存储中有另一个名称），则会出现此错误

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

---

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

在下一篇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'

它对我有用，以防你错过它 如果您使用的是Nextjs+Material ui，那么实际上有一些自定义代码可以/需要包含在document.js和

\u app.js

中，以删除服务器端注入的CSS，以便在加载页面时重新创建CSS

由于代码随mui和nextjs版本的变化而变化，我将直接向您推荐存储库