当我试图在Nextjs中使用重图表时，我得到了一个“水化失败”错误。以前有人解决过这个问题吗？
当我试图在Nextjs中使用重图表时，我得到了一个“水化失败”错误。以前有人解决过这个问题吗？
提问于 2022-05-19 21:18:55
我刚刚开始一个Nextjs项目，我想使用一个名为re图表的库，这个库很受欢迎。
但是，即使是其中一个示例中非常基本的复制粘贴作业，也会在我的NextJS项目中引发一个错误。
我希望这个能加载一个图表。它就是这么做的。但随后出现了一个错误，显示：
1 of 3 unhandled errors
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch
node_modules\react-dom\cjs\react-dom.development.js (14388:0)
tryToClaimNextHydratableInstance
node_modules\react-dom\cjs\react-dom.development.js (14416:0)
updateHostComponent$1
node_modules\react-dom\cjs\react-dom.development.js (20711:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (22447:0)此页提到了在msg之前的其他错误是罪魁祸首。我的控制台还有其他一些错误。这些是为了：
arning: Prop `y` did not match. Server: "5" Client: "10.800000190734863"
at text
at Text (webpack-internal:///./node_modules/recharts/es6/component/Text.js:232:5)
at g
at Layer (webpack-internal:///./node_modules/recharts/es6/container/Layer.js:23:24)
at g
at g
at Layer (webpack-internal:///./node_modules/recharts/es6/container/Layer.js:23:24)
at CartesianAxis (webpack-internal:///./node_modules/recharts/es6/cartesian/CartesianAxis.js:77:5)
at svg
at Surface (webpack-internal:///./node_modules/recharts/es6/container/Surface.js:23:24)
at div
at CategoricalChartWrapper (webpack-internal:///./node_modules/recharts/es6/chart/generateCategoricalChart.js:920:7)
at SimpleBarChart
at main
at div
at Home和
next-dev.js?3515:25 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.我已经访问了十几个不同的页面，寻找解决这个问题的方法，但是我没有看到任何看起来像解决方案的东西。
这是我的代码：
index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import SimpleBarChart from "../components/rechartsCharts/SimpleBar";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
</Head>
<main className={styles.main}>
<SimpleBarChart></SimpleBarChart>
</main>
<footer className={styles.footer}>
<span>some footer</span>
</footer>
</div>
);
}和SimpleBarChart.js
import React from "react";
import dynamic from "next/dynamic";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
const data = [
{
name: "Page A",
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: "Page B",
uv: 3000,
pv: 1398,
amt: 2210,
},
{
name: "Page C",
uv: 2000,
pv: 9800,
amt: 2290,
},
{
name: "Page D",
uv: 2780,
pv: 3908,
amt: 2000,
},
{
name: "Page E",
uv: 1890,
pv: 4800,
amt: 2181,
},
{
name: "Page F",
uv: 2390,
pv: 3800,
amt: 2500,
},
{
name: "Page G",
uv: 3490,
pv: 4300,
amt: 2100,
},
];
export default function SimpleBarChart() {
return (
<BarChart
id={1}
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
);
}请注意，这是从这里复制和粘贴进来的，所以我真的希望它能“开箱即用”。
助赏
回答 1
Stack Overflow用户
发布于 2022-05-22 00:34:01
正如@juliomalves所说，答案是在ssr中使用动态导入。
import dynamic from "next/dynamic";
const SimpleBarChartWithoutSSR = dynamic(
import("../components/rechartsCharts/SimpleBar"),
{ ssr: false }
);
const SimpleScatterChartWithoutSSR = dynamic(
import("../components/rechartsCharts/SimpleScatter"),
{ ssr: false }
);
const DashedLineChartWithoutSSR = dynamic(
import("../components/rechartsCharts/DashedLine"),
{ ssr: false }
);
const PercentAreaChartWithoutSSR = dynamic(
import("../components/rechartsCharts/PercentArea"),
{ ssr: false }
);这些组件在那之后就起作用了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72311188
复制相关文章
相似问题
腾讯云开发者
