reactjs 使用nextjs的recharts时出现水合失败错误

new9mtju 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(252)

我刚刚开始了一个新的Next项目，我想使用一个名为ReCharts的库。
然而，每当我在我的项目中使用它时，即使是使用所提供的示例之一，它也会抛出以下错误：

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: An error occurred during hydration. The server HTML was replaced with client content in `<div>`.

Warning: 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

下面是我的代码：

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,
    }
];

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>
    );
}

export default function Home(){
    return (
        <SimpleBarChart />
    );
}

请注意，这是从here复制并粘贴进来的，所以它应该真的可以开箱即用。

reactjs

来源：https://stackoverflow.com/questions/72311188/hydration-failed-error-using-recharts-with-nextjs

2条答案

按热度按时间

kiz8lqtg1#

正如@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 }
);

赞(0）回复(0）举报 2023-05-28

y3bcpkx12#

对于那些使用@plutownium的答案来渲染Pie图表的人来说，你需要使用一个禁用ssr的动态导入和常规导入的混合：

import { Pie, Cell } from "recharts";

const PieChart = dynamic(() => (
    import("recharts").then(recharts => recharts.PieChart)
), { ssr: false });

const Example = () => (
    <PieChart width={100} height={100}>
        <Pie data={data} {/* etc... */}>
            { data.map(entry => (
                <Cell fill={entry.color} key={entry.key} />
            ))}
        </Pie>
    </PieChart>
);

这应该可以防止出现水合警告 * 和 *，并允许图表呈现。

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 使用nextjs的recharts时出现水合失败错误

2条答案

相关问题

热门标签

最新问答