Highcharts 不会在值变化时重新加载或重新渲染图表

一种解决方案是使用 useEffect 钩子并在 useEffect 依赖项中传递 details，所以每次细节改变他的状态时 useEffect 将被触发并且你的 dataValues 将被更新：

import React,{ useState,useEffect } from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import PieChart from "highcharts-react-official";

const App = () => {
  const [details,setDetails] = useState("sup");
  let dataValue = [
    ["Firefox",45.0],["IE",26.8],["Chrome",12.8],["Safari",8.5],["Opera",6.2],["Others",0.7]
  ]; //pass default "sup" to datavalue
  const [chartOptions,setChartOptions] = useState({
    chart: {
      type: "pie"
    },title: {
      text: ""
    },plotOptions: {
      pie: {
        size: "50%",allowPointSELEct: true,cursor: "pointer",depth: 35,innerSize: 100,dataLabels: {
          enabled: false
        },showInLegend: true
      }
    },series: [
      {
        type: "pie",name: "Browser share",data: dataValue
      }
    ]
  });
  useEffect(() => {
    console.log(details);
    if (details === "sup") {
      dataValue = [
        ["Firefox",0.7]
      ];
    } else if (details === "hola") {
      dataValue = [
        ["Apple",35],["Guava",40],["Grapes",22.5]
      ];
    }
    setChartOptions((prev) => {
      return {
        ...prev,series: [
          {
            type: "pie",data: dataValue
          }
        ]
      };
    });
  },[details]);

  async function newfetchVendor(E) {
    if (!!E) {
      setDetails(e.target.value);
    }
  }

  return (
    <div>
      <SELEct onChange={newfetchVendor}>
        <option value="sup">sup</option>
        <option value="hola">hola</option>
      </SELEct>
      <PieChart
        highcharts={Highcharts}
        options={ChartOptions}
        oneToOne={truE}
      />
    </div>
  );
};

render(<App />,document.getElementById("root"));