使用Recharts v2.2.0绘制多柱状图时出现TypeError报错求助

报错信息 #

Uncaught TypeError: Cannot read properties of null (reading 'includes')
at Text.render (Text.js:421:1)
at finishClassComponent (react-dom.development.js:17164:1)
at updateClassComponent (react-dom.development.js:17121:1)
at beginWork (react-dom.development.js:18747:1)
at beginWork$1 (react-dom.development.js:23691:1)
at performUnitOfWork (react-dom.development.js:22960:1)
at workLoopSync (react-dom.development.js:22883:1)
at renderRootSync (react-dom.development.js:22856:1)
at recoverFromConcurrentError (react-dom.development.js:22348:1)
at performConcurrentWorkOnRoot (react-dom.development.js:22260:1)

问题代码 #

import React from 'react'
import {
  BarChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Bar
} from 'recharts'
import PropTypes from 'prop-types'
import { CustomTooltip } from './CustomToolTip'

export default function MultiBarsChart ({ bars, barSize = 25, dataKey = 'name', dataURL, params }) {
  let dataLength = 0
  dataLength = data?.length

  return (
    <div>
      {dataLength !== 0
      ? <ResponsiveContainer height={298} width='100%' margin={0}>
        <BarChart
          height={300} data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >

          <XAxis dataKey={dataKey} />
          <YAxis
            type='number'
            yAxisId={0}
            axisLine={false}
            stroke={null}
          />
          <CartesianGrid strokeDasharray='1 0' vertical={false} />
          <Tooltip content={<CustomTooltip />} />
          {bars.map((bar) =>
            <Bar barSize={barSize} key={bar.id} dataKey={bar.name} fill={bar.color} />
          )}
        </BarChart>

      </ResponsiveContainer>
    : <div className='overall-title'>There is no data available.</div>}
    </div>
  )
}

数据配置 #

• data:

  [
    {"incomplete": 12,"complete": 7,"name": "abc"},       
    {"incomplete": 31,"complete": 25,"name": "bdc"} 
  ]
  

• bars:

  [
    { "name": "complete", "id": 1, "color": "#7500c0" }, 
    { "name": "incomplete", "id": 2, "color": "#c4cdd5" }
  ]
  

问题原因 #

1. props未声明data参数：组件函数的props解构里没有data，但代码中直接使用了data?.length和data={data}，会导致data为undefined，后续Recharts渲染时可能触发异常。
2. YAxis的stroke设为null：Recharts的Text组件处理样式时，会对stroke属性调用includes方法，当stroke为null时，就会触发Cannot read properties of null (reading 'includes')的报错。

修复方案 #

1. 补充data到组件props #

在组件的props解构中添加data，确保数据能正确传入：

export default function MultiBarsChart ({ bars, barSize = 25, dataKey = 'name', dataURL, params, data }) {

2. 修改YAxis的stroke属性 #

既然已经设置了axisLine={false}隐藏轴线，无需额外设置stroke={null}，直接删除该属性即可；如果需要保留轴线并设置颜色，改为具体颜色值（比如stroke='#ccc'）：

<YAxis
  type='number'
  yAxisId={0}
  axisLine={false}
/>

修改后的完整代码 #

import React from 'react'
import {
  BarChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Bar
} from 'recharts'
import PropTypes from 'prop-types'
import { CustomTooltip } from './CustomToolTip'

export default function MultiBarsChart ({ bars, barSize = 25, dataKey = 'name', dataURL, params, data }) {
  let dataLength = 0
  dataLength = data?.length

  return (
    <div>
      {dataLength !== 0
      ? <ResponsiveContainer height={298} width='100%' margin={0}>
        <BarChart
          height={300} data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >

          <XAxis dataKey={dataKey} />
          <YAxis
            type='number'
            yAxisId={0}
            axisLine={false}
          />
          <CartesianGrid strokeDasharray='1 0' vertical={false} />
          <Tooltip content={<CustomTooltip />} />
          {bars.map((bar) =>
            <Bar barSize={barSize} key={bar.id} dataKey={bar.name} fill={bar.color} />
          )}
        </BarChart>

      </ResponsiveContainer>
    : <div className='overall-title'>There is no data available.</div>}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Rashmitha N K