Javascript React/Gatsby中的图表js

您好，我正在尝试使用盖茨比的图表js。我目前正在学习一个关于如何使用chart js和react的教程，我不确定问题是否在于他使用的是creat react应用程序，而不是Gatsby，但错误似乎并未表明这一点

首先，我安装了以下软件：

npm i --save react-chartjs-2

然后

chartData.js：

import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";


const chartData = () => {
    const [chartData, setChartData] = useState({});

    const chart = () => {
        setChartData({
            labels: ["monday", "tuesday", "wednesday", "thursday", "friday"],
            datasets: [
                {
                    level: 'level of xyz',
                    data: [32, 55, 33, 47, 64]
                }
            ]
        })
    }

    useEffect(() => {
        chart()
    }, [])
    return(
        <div>
            <h1>Hello</h1>
            <div>
                <Line data={chartData}/>
            </div>
        </div>
    )
}

export default chartData;

---

您有名称聚合问题。尝试使用不同的名称重命名函数和变量：

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";


const ChartData = () => {
    const [whatever, setWhatever] = useState({});

    const chart = () => {
        setWhatever({
            labels: ["monday", "tuesday", "wednesday", "thursday", "friday"],
            datasets: [
                {
                    level: 'level of xyz',
                    data: [32, 55, 33, 47, 64]
                }
            ]
        })
    }

    useEffect(() => {
        chart()
    }, [])

    return(
        <div>
            <h1>Hello</h1>
            <div>
                <Line data={whatever}/>
            </div>
        </div>
    )
}

export default chartData;

其中，图表数据重复导致错误

---

此外，您的chartData必须是chartData，因为在React中，组件必须大写。

我关闭了函数和变量，但仍然得到相同的两个错误。react中的组件必须以大写字母开头：ChartData。如果错误仍然存在，您可以提供代码，在哪里调用ChartData组件？

   6:39  error  React Hook "useState" is called in function "chartData" which is neither a React function component or a custom React Hook function   react-hooks/rules-of-hooks
  20:5   error  React Hook "useEffect" is called in function "chartData" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";


const ChartData = () => {
    const [whatever, setWhatever] = useState({});

    const chart = () => {
        setWhatever({
            labels: ["monday", "tuesday", "wednesday", "thursday", "friday"],
            datasets: [
                {
                    level: 'level of xyz',
                    data: [32, 55, 33, 47, 64]
                }
            ]
        })
    }

    useEffect(() => {
        chart()
    }, [])

    return(
        <div>
            <h1>Hello</h1>
            <div>
                <Line data={whatever}/>
            </div>
        </div>
    )
}

export default chartData;

const chartData = () => {
    const [chartData, setChartData] = useState({});
...
}