javascript - React Chart.js BarGraph 未更新

Question

我正在尝试使用 实现条形图react-chartjs-2，但在将数据传递给它时遇到了一些问题。

如果我在调用图形时直接声明数组，它可以工作：

render(){
      return(
        <div>
          <NumberField label={"n"} min={0} max={9999999} handleChange={this.changeN}/>
          <NumberField label={"p"} min={0} max={1} handleChange={this.changeP}/>
          <Distribution name={this.state.name} 
            media={this.state.media} 
            varianza={this.state.varianza}
            desviacion={this.state.desviacion}
          />
          <BarGraph _labels={['a','b']} _data= {[1,2]}/>
          
        </div>
      )
    }

第一种方式

但如果我尝试类似：

constructor (props) {
      super(props);
      this.changeN = this.changeN.bind(this);
      this.changeP = this.changeP.bind(this);

      this.state={
        name: "Binomial",
        p: 0,
        n: 0,
        media: 0,
        varianza: 0,
        desviacion: 0,
        labels: [],
        data: []
      }
    }

    componentDidUpdate(_prevProps, prevState) {
      if (prevState.p !== this.state.p || prevState.n !== this.state.n) {
        
        this.setState({
          media: this.calcularMedia(),
          varianza: this.calcularVarianza(),
          desviacion: this.calcularDesviacion(),
          data: [1,2],
          labels: ['a', 'b']
        });
      }
    }

·········

render(){
      return(
        <div>
          <NumberField label={"n"} min={0} max={9999999} handleChange={this.changeN}/>
          <NumberField label={"p"} min={0} max={1} handleChange={this.changeP}/>
          <Distribution name={this.state.name} 
            media={this.state.media} 
            varianza={this.state.varianza}
            desviacion={this.state.desviacion}
          />
          <BarGraph _labels={this.state.labels} _data= {this.state.data}/>
          
        </div>
      )
    }

图形无法正确呈现：第二种方式

这是 BarGraph 组件：

import React, { useState, useEffect } from 'react';
import {Bar} from 'react-chartjs-2';

const BarGraph = ({_labels, _data}) =>{
    const [chartData, setChartData] = useState({});

    const chart = () =>{
        setChartData({
            labels: _labels,
            datasets: [
                {
                    label: 'label',
                    data: _data,
                    backgroundColor: 'rgba(75,192,192, 0.6)',
                    highlightStroke: "rgba(220,220,220,1)",
                    borderWidth: 0
                }
            ]
        })
    }

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


    return(
        <div className="App">
        <div style={{height: "500px", width: "500px"}}>
            <Bar data={chartData} options={{
                legend:{
                    display: false
                },
               responsive: true,
               title: {text: 'title', display: true},
               scales:{
                   yAxes:[
                       {
                           ticks:{
                               autoSkip: true,
                               maxTicksLimit: 10,
                               beginAtZero: true
                           }
                       }
                   ]
               }
            }}/>
        </div>
        </div>
    )
}

export default BarGraph;

提前致谢。

Answer 1

在主文件中声明数据并传递它可以正常工作：

const graphData= {
  labels: ['t1', 't2'],
  datasets: [
    {
      backgroundColor: 'rgba(90, 172, 170, 0.8)',
      data: [15,78]
    }
  ]
}

class Binomial extends Component {
render(){
      console.log(this.state.data);
      console.log(this.state.labels);
      return(
        <div>
          <BarGraph3 data={graphData}/>
        </div>
      )
    }
}
}