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

编程问答 2022-05-13

问题描述

我正在 next.js 中的 next 中尝试选项卡，但每次我使用它时它都会显示一个控制台警告链接 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-tabs 作为选项卡，但我也在使用相同的代码的 react js 上工作，但它没有显示此控制台警告。所以我的问题是为什么它会发生？我该如何解决？

解决方法

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

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

例如。

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

我有这个简单的 Test 组件。我将 name (1) 属性从另一个组件发送到这个 Test 组件。如果我在生成页面后使用 redux 在客户端中更改此名称 (to 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 和 _app.js 中以删除服务器端注入的 CSS 所以当页面加载时重新创建 CSS。

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

https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages

react-tabsreactjsreactjsreactjsreactjs