График js в React / Gatsby

Question

Здравствуйте, я пытаюсь использовать диаграмму js в Gatsby. В настоящее время я следую руководству по использованию диаграммы js с реакцией, и я не уверен, что проблема в том, что он использует приложение creat-react-app, а не Gatsby, но ошибки, похоже, не указывают на это.

сначала я установил следующее:

npm i --save react-chartjs-2

затем

npm i --save chart.js

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;

Я получаю эти ошибки:

   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

Answer 1

У вас проблема со связностью имен. Попробуйте переименовать функции и переменные с другим именем:

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({});
...
}

Где chartData дублируется, вызывая ошибку.

Кроме того, ваш chartData должен быть ChartData, поскольку в React компоненты должны начинаться с заглавных букв.