NextJS中的ChartJS抛出错误类型错误：无法读取null的属性(阅读'useRef')

tmb3ates 于 2022-11-06 发布在 Chart.js

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

所以我试着用ChartJS为我的NextJS应用程序添加图表。但是，我似乎在渲染它时遇到了问题。我也学习了其他教程和/或文章，但是似乎我得到了同样的错误。
我得到的错误是这样的：

Server Error
TypeError: Cannot read properties of null (reading 'useRef')
This error happened while generating the page. Any console logs will be displayed in the terminal window.

我不知道为什么我会得到这个错误，因为我没有在我的代码中使用useRef挂钩。
下面是我的root/pages/admin/home.js代码

import Head from 'next/head'
import Image from 'next/image'
import LineGraph from '../../components/admin/line'

export default function Home() {

    return (
        <div className="container">
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                <LineGraph />
            </main>

        </div>
    )
}

下面是我的LineGraph root/components/admin/line.js代码

import React, { useRef } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js/auto';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

const LineGraph = () => {
  return (
    <canvas>
      <h2>Line Example</h2>
      <Line
        id="lineChart"
        data={data}
        width={400}
        height={400}
      />
    </canvas>
  );
}

export default LineGraph;

PS：如果这个问题是重复的，请删除链接，我会给予它一个尝试。非常感谢你们的帮助伙计。

chart.js

来源：https://stackoverflow.com/questions/74025968/chartjs-in-nextjs-throws-error-typeerror-cannot-read-properties-of-null-readin

2条答案

按热度按时间

fcy6dtqo1#

首先，由于您没有使用useRef，因此可以删除导入。
如果您将HTML放在canvas元素中，则代码可能会失败，这不是您应该做的事情。
React-chartjs会自动为你创建canvas标签。

const LineGraph = () => {
  return (
    <>
      <h2>Line Example</h2>
      <Line
        id="lineChart"
        data={data}
        width={400}
        height={400}
      />
    </>
  );
}

赞(0）回复(0）举报 2022-11-06

cgh8pdjw2#

所以，我想通了。这和包的版本有关。在我的package.json文件中，我有以下依赖项：

"dependencies": {
        "next": "12.3.1",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "chart.js": "^2.9.3",
        "react-chartjs-2": "^2.9.0"
}

为了使它工作，我必须手动安装chart.js和react-chartjs-2的特定版本。所以，我的图形最终工作，我的package.json看起来像这样：

"dependencies": {
    "chart.js": "^3.9.1",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "18.2.0"
  },

赞(0）回复(0）举报 2022-11-06

我来回答

NextJS中的ChartJS抛出错误类型错误：无法读取null的属性(阅读'useRef')

2条答案

相关问题

热门标签

最新问答