以下のReactのグラフライブラリ「react-chartjs-2」を使って棒グラフを表示する処理が作れず、エラーで表示が真っ白になり困っています。
解決のためのアドバイスを頂けましたら幸いです。
表示されたエラーコード
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
at useRef (react.development.js:1630:1)
at ChartComponent (chart.tsx:36:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
The above error occurred in the <ForwardRef(ChartComponent)> component:
at ChartComponent (http://localhost:3000/static/js/bundle.js:62503:5)
at BarChart (http://localhost:3000/static/js/bundle.js:202:5)
at div
at App (http://localhost:3000/static/js/bundle.js:36:82)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
開発環境
・Reactのバージョン:18.2.0
・chart.jsのバージョン:3.8.0
・react-chartjs-2のバージョン:4.3.1
・OS:Windows10
・エディタ:VSCode
・ブラウザ:Chrome(バージョン: 103.0.5060.66(Official Build) (64 ビット))
試したこと
- 次のYouTube動画を見て「react-chartjs-2」を使って棒グラフを表示する処理を作った。
https://www.youtube.com/watch?v=RF57yDglDfE
(※動画ではchart.js react-chartjs-2のインストールにyarnを使っているが、本開発環境では、いつもnpmコマンドを使っているため、以下のコマンドでインストールした。)
npm install -D chart.js react-chartjs-2
-VCCodeを再起動して、以下の「react-chartjs-2」サイトの「Quickstart」で次のことを実行した。
サイト:
https://www.npmjs.com/package/react-chartjs-2
実行したこと:
①以下のコマンドを実行。
npm i react-chartjs-2 chart.js
②ドーナツチャートのテストプログラムを実行(※以下のApp.jsで、<BarChartの代わりに<Doughnutを使って、propsにdata={userData]を設定)
import { Doughnut } from 'react-chartjs-2';
<Doughnut data={...} />
-同じ問題を持ち、解決したサイトがあるか調査
結果:見つからず。
以下のサイトに同じ問題で困っている質問があったが、未解決。他のサイトを見ても未解決なものばかり。
https://stackoverflow.com/questions/72382437/react-invalid-hook-call-while-using-chartjs
ソースコード
App.js
import "./App.css";
import { useState } from "react";
import BarChart from "./components/BarChart";
import { UserData } from "./Data";
function App() {
const [userData, setUserData] = useState({
labels: UserData.map((data) => data.year),
datasets: [
{
label: "Users Gained",
data: UserData.map((data) => data.userGain),
},
],
});
return (
<div className="App">
<BarChart chartData={userData}></BarChart>
</div>
);
}
export default App;
BarChart.js
import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";
function BarChart({ chartData }) {
return <Bar data={chartData} />;
}
export default BarChart;
Data.js
export const UserData = [
{
id: 1,
year: 2016,
userGain: 80000,
userLost: 823,
},
{
id: 2,
year: 2017,
userGain: 45677,
userLost: 345,
},
{
id: 3,
year: 2018,
userGain: 78888,
userLost: 555,
},
{
id: 4,
year: 2019,
userGain: 90000,
userLost: 4555,
},
{
id: 5,
year: 2020,
userGain: 4300,
userLost: 234,
},
];
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
エクスプローラーのディレクトリ構成画像(※npx create-react-appで作成したディレクトリ構成にcomponentsディレクトリを追加して、BarChart.js、LineChart.js(※特に記述なしの空ファイル。後ほど折れ線グラフを作るために作成)を追加、srcディレクトリに Data.jsを追加)