ReactJS + ChartJS：点击树形菜单后柱状图数据无法更新求助

你的核心问题有两个：

1. 切换逻辑错误：changeData2里把已处理好的图表结构数据（dataChart.dataCity）赋值给了dataKota，但dataKota应该存储的是原始城市数据数组，这种数据类型不匹配会导致dataChart生成的图表数据异常，图表无法识别新数据。
2. 缺少视图切换状态：没有用状态变量控制当前图表显示的是省级还是城市数据，依赖dataKota/dataProvinsi的变化来触发渲染，逻辑耦合度高且容易失效。

1. 新增状态变量跟踪当前视图类型，控制图表展示的数据源；
2. 修正切换逻辑：先加载对应省份的原始城市数据，再切换视图状态；
3. 让图表组件根据视图状态选择对应的已处理数据。

1. 添加视图状态 #

import { useState, useMemo } from 'react';

// 默认显示省级数据
const [currentView, setCurrentView] = useState('prov');
// 假设你有原始的全量城市数据，比如allCityData
const [dataKota, setDataKota] = useState([]);

2. 修正图表渲染逻辑 #

假设你使用react-chartjs-2的Bar组件，修改数据来源：

import { Bar } from 'react-chartjs-2';

<Bar 
  data={currentView === 'prov' ? dataChart.dataProv : dataChart.dataCity}
  // 可选：如果图表仍不更新，添加key强制重渲染
  key={currentView}
/>

3. 修正切换函数 #

const changeData2 = () => {
  // 1. 过滤出ACEH对应的原始城市数据（替换成你的实际数据来源，比如API请求/本地数据）
  const acehCityData = allCityData.filter(item => item.provinsi_name === 'ACEH');
  // 2. 更新原始城市数据状态
  setDataKota(acehCityData);
  // 3. 切换视图到城市模式
  setCurrentView('city');
};

4. 保留原有的dataChart逻辑（无需修改） #

你的useMemo生成dataChart的逻辑是正确的，它会自动监听dataKota和dataProvinsi的变化，生成对应的图表结构数据。

• 确保原始城市数据源包含ACEH对应的城市数据，且数据结构和dataProvinsi一致（包含kota和total_building字段）；
• 如果使用其他图表库，确保组件能正确响应data属性的变化，必要时添加key或调用图表实例的update()方法。

内容的提问来源于stack exchange，提问作者Arbi Dwi Wijaya