3

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

<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，我使用相同的代码，但它没有显示此控制台警告。所以我的问题是为什么会这样？我该如何解决？

4

4 回答 4

5

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

它对我有用

于 2021-04-20T10:55:30.480 回答
1

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

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

例如。

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

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

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

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

于 2021-04-20T09:51:41.560 回答
0

万一你错过了

如果您使用的是 Nextjs + Material-ui，实际上有一些自定义代码可以/需要包含在您的 _ 中，document.js并删除服务器端注入的 CSS，以便在页面加载时重新创建 CSS。_app.js

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

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

于 2021-04-20T11:20:47.263 回答
-1

根据 react-tabs repo/npmjs.org 页面（https://www.npmjs.com/package/react-tabs）中的文档：

import { resetIdCounter } from 'react-tabs';

resetIdCounter();

ReactDOMServer.renderToString(...);

我遇到了同样的问题，并将resetIdCounter父组件中的函数调用到选项卡结构并清除了错误。

不确定是否有更好的地方使用这个功能，比如在一个useEffect钩子或其他东西中，但我现在就用这个​​。

于 2021-09-28T19:07:39.377 回答