2

While using the dependency of the Biz chart i have got this error message. "Error: 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"

import React from 'react'
import {
    Chart,
    Interval,
    Axis,
    Tooltip,
    Coordinate,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,
    Util
  } from "bizcharts";
  import DataSet from "@antv/data-set";

function Biz() {
    const data = [
        {
          State: "WY",
          "小于5岁": 25635,
          "5至13岁": 1890,
          "14至17岁": 9314
        },
        {
          State: "DC",
          "小于5岁": 30352,
          "5至13岁": 20439,
          "14至17岁": 10225
        },
        {
          State: "VT",
          小于5岁: 38253,
          "5至13岁": 42538,
          "14至17岁": 15757
        },
        {
          State: "ND",
          "小于5岁": 51896,
          "5至13岁": 67358,
          "14至17岁": 18794
        },
        {
          State: "AK",
          "小于5岁": 72083,
          "5至13岁": 85640,
          "14至17岁": 22153
        }
      ];
      const ds = new DataSet();
      const dv = ds.createView().source(data);
      dv.transform({
        type: "fold",
        fields: ["小于5岁", "5至13岁", "14至17岁"],
        // 展开字段集
        key: "年龄段",
        // key字段
        value: "人口数量",
        // value字段
        retains: ["State"] // 保留字段集，默认为除fields以外的所有字段
      });
  
    return (
        <div>
            <Chart height={400} data={dv.rows} autoFit>
        <Coordinate transposed/>
                <Tooltip shared />
        <Axis
          name="State"
          label={{
            offset: 12
          }}
        />
        <Interval
          adjust={[{ type: 'stack' }]}
          position="State*人口数量"
          color={"年龄段"}
                    style={{
                        fillOpacity:0.75
                    }}
          label={['人口数量', { position: 'middle', offset: 0, style: { fill: '#fff' }, layout: { type: 'limit-in-shape' } }]}
        />
      </Chart>

        </div>
    )
}

export default Biz

Here are the dependencies

{
  "name": "Biz",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@antv/data-set": "^0.11.8",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bizcharts": "^4.1.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

While I am running my program I have got the above error.

Zohair Ahmed
  • 25
  • 1
  • 3

1 Answers1

2

The invalid hook call is currently an issue with bizcharts (see open issue on Github).

The problem may have to do with how different react version dependencies are handled with npm, and apparently yarn does a better job (here's a discussion). What worked for me and a few others is to uninstall with npm and re-install with yarn:

$ npm uninstall bizcharts
$ yarn add bizcharts
Larissa
  • 21
  • 2