动态加载的图表数据不显示 Chartjs React

Question

我创建了一个饼图来显示宠物小精灵的捕获率。 console.logs 一开始一切正常，但随后似乎继续运行因此数据不再正确显示。道具值是来自不同组件的 useState 变量。

这是我的代码：

const [captureRate, setCaptureRate] = useState();
// const [lossRate, setLossRate] = useState();

console.log("run");



    let capture=[];
    let notCapture=0;
    console.log((props.nameForRate));

    useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon-species/'+(props.nameForRate)+'/')
    .then((res)=>{

      let data=res.data;

      capture[0] = data.capture_rate;
      capture[1] = 255 - (data.capture_rate);
    
      console.log(("it works " +capture));
      setCaptureRate(capture);

    });

    
    console.log("here it is again " + captureRate[0]);
    
  
   }, []);




return(
    <>
    <div className="componentInteriorDoughnut">
          {/* <h3>Chart 2: Doughnut Chart</h3> */}

          <div className="CaptureRate">
          <Doughnut 
          data={{
             
              labels: ['Captured', 'Not Captured'],
              datasets: [{
                  label: 'Capture Rate',
                  data: captureRate,
                  backgroundColor: [
                    'rgb(42, 157, 143)',
                    '#f1f1f1',
                   
                  ],
                
                  borderWidth: 0,
                //   borderRadius:10,
                  
            
                  
                  
              },

Answer 1

您能否尝试为特定的值更改添加侦听器，此函数将在每次状态更改时调用。而不是下面的代码

useEffect(() => {},[])

相反，如果您可以指定要侦听的变量，则可以避免多次函数调用。例如像这样使用

useEffect(() => {},[notCapture]);

在这种情况下，如果 notCaputure 变量发生任何变化，则只会触发函数

动态加载的图表数据不显示 Chartjs React

Dynamically loaded chart data not showing Chartjs React

reactjs

chart.js