reactjs chartjs 在用户点击时更改数据

Question

我想问一下当用户单击按钮或树形菜单时更改条形图上的数据。

所以我有一个 useState 来存储 provinsi、kota、kelurahan 和 kecamatan =

  const [dataProvinsi, setDataProvinsi] = useState([]);
  const [dataKota, setDataKota] = useState([]);
  const [dataKecamatan, setDataKecamatan] = useState([]);
  const [dataKelurahan, setDataKelurahan] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingKota, setIsLoadingKota] = useState(false);
  const [isLoadingKecamatan, setIsLoadingKecamatan] = useState(false);
  const provinsiRef = useRef([]);
  const kotaRef = useRef([]);
  const kecamatanRef = useRef([]);

然后，这里是获取代码=

  const getDataAllProvinsi = () => {
    setIsLoading(true);
    getBuildingOLDallProvinsi()
      .then((resolve) => {
        setDataProvinsi(resolve);
        console.log();
      })
      .catch((reject) => {
        console.log(reject);
      })
      .finally(setIsLoading(false));
  };

  const handleProvinsi = async (index) => {
    try {
      const provinsi = provinsiRef.current[index].dataset.prov;
      setIsLoading(true);
      const result = await getBuildingOLDallKota(provinsi);
      setDataKota(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoading(false);
    }
  };

  const handleKota = async (provinsi, index) => {
    try {
      const kota = kotaRef.current[index].dataset.city;
      setIsLoadingKota(true);
      const result = await getBuildingOLDallKecamatan(provinsi, kota);
      setDataKecamatan(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoadingKota(false);
    }
  };

  const handleKecamatan = async (provinsi, kota, index) => {
    try {
      const kecamatan = kecamatanRef.current[index].dataset.camat;
      setIsLoadingKecamatan(true);
      const result = await getBuildingOLDallKelurahan(
        provinsi,
        kota,
        kecamatan
      );
      setDataKelurahan(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
      console.log(error);
    } finally {
      setIsLoadingKecamatan(false);
    }
  };

  useEffect(() => {
    getDataAllProvinsi();
  }, [dataKota, dataKecamatan, dataKelurahan]);

对于这样的图表=

  const colorCode = "#0066FF";
  const colorFont = "#8E9093";
  const state = {
    dataProv: {
      labels: dataProvinsi.map((o) => o.provinsi),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataProvinsi.map((o) => o.total_building),
        },
      ],
    },
    datakota: {
      labels: dataKota.map((o) => o.kota),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataKota.map((o) => o.total_building),
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
          labels: {
            font: {
              color: colorFont,
            },
          },
        },
      },
      scales: {
        x: {
          grid: {
            display: false,
          },
          beginAtZero: false,
          ticks: {
            color: colorFont,
          },
        },
        y: {
          grid: {
            display: false,
          },
          beginAtZero: true,
          ticks: {
            color: colorFont,
          },
        },
      },
    },
  };

  const plugins = [
    {
      beforeDraw: function (chart) {
        if (chart.chartArea) {
          let ctx = chart.ctx;
          let chartArea = chart.chartArea;
          let barArray = chart.getDatasetMeta(0).data;

          ctx.fillStyle = "#B2D1FF85";

          for (let i = 0; i < barArray.length; i++) {
            const { x, width } = barArray[i];

            ctx.fillRect(
              x - width / 2,
              chartArea.top,
              width,
              chartArea.bottom - chartArea.top
            );
          }
        }
      },
    },
  ];

每次用户点击时更改数据的代码=

  const changeData2 = () => {
    const data = [state.datakota];
    setDataKota(data);
    console.log(data);
  };

对于像这样的酒吧本身=

<Bar
          type={"bar"}
          height={120}
          data={state.dataProv}
          options={state.options}
          plugins={plugins}
        />

当我在浏览器中执行它时，最初显示省数据然后我点击省数据，图表上没有任何反应。有关视频中的更多详细信息，我放置了链接 = https://va.media.tumblr.com/tumblr_rqe2h1npcr1zb5h2t.mp4

所以我的问题是，我的代码有什么问题，以至于当用户点击树形菜单时，图表上没有任何反应吗？谢谢