React.js中通过JSON数组向柱状图传递动态值问题求助

问题分析与解决 #

你代码里的问题有两个核心点：

• 错误地将map返回的数组再次嵌套进外层数组（[chartUsers.map(...)]），导致labels和data变成了二维数组，而图表组件需要的是一维数组格式。
• 给Month和totalUsers额外添加了逗号，这会把数值类型的totalUsers转为带逗号的字符串，同时让月份显示多余符号，图表无法正确解析这些数据。

修正后的代码 #

data: {
  labels: chartUsers.map(item => item.Month),
  datasets: [
    {
      label: "2022",
      data: chartUsers.map(item => item.totalUsers),
      maxBarThickness: 15
    }
  ]
}

可选优化（处理空数据场景） #

如果chartUsers可能为空，或者部分数据项缺少Month/totalUsers字段，可以保留可选链操作符避免报错：

data: {
  labels: chartUsers.map(item => item?.Month),
  datasets: [
    {
      label: "2022",
      data: chartUsers.map(item => item?.totalUsers),
      maxBarThickness: 15
    }
  ]
}

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari