Question

我在使用Reactjs使用Chartjs绘制条形图时遇到问题。当我console.logging在componentDidMount中创建的图表变量时，它显示正确的标签和数据（标签：（5）[“非常肯定”，“有些肯定”，“中性”，“有些否定”，“非常否定”]和数据：（5）[10、17、35、34、4]）。但是，当我加载页面时，条形图不会显示任何数据。我不能正确绘制条形图吗？

class BarChart extends Component {
  constructor(props){
      super(props);
      this.state = {
        render: false,
        data : {
            labels: [],
            datasets: [
                {
                    label: "Number of Tweets by Sentiment Category",
                    backgroundColor: "blue",
                    data: []
                },
              ]
            }
    }
  }

  componentWillMount() {
    this.getGraphs();
  }

  componentDidMount() {
    console.log(this.state.data)
    let el = ReactDOM.findDOMNode(this.refs.chart);
    let ctx = el.getContext("2d");

    let chart = new Chart(ctx, {
        type: 'bar',
        data: this.state.data,
        options: {
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0
                    }
                }]
              }
            }
          }
        );
      console.log(chart)
      this.setState({ render: true })
      }

  getGraphs = async() => {

    let ticker = this.state.crypto;
    let name = this.state.name;

    let URL = 'http://localhost:5000/api/getGraphs';

    let response = fetch(URL, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'name': name,
        'ticker': ticker,
      }
    })
    .then((response) => response.json())
    .then((info) => {
      let data = this.state.data;

      data['labels'] = info.categories;
      data['datasets']['data'] = info.count;
      this.setState({ 'data': data })
    })
  }

  render() {
  return (
    <div className='card'>
      { this.state.render = true &&
        <canvas ref="chart" height="400px" />
      }
    </div>);

  } 
}

export default BarChart;

Answer 1

此行似乎不正确。您正在此处分配一个值，而不检查其是否为真。

{ this.state.render = true &&
        <canvas ref="chart" height="400px" />
      }

将其更改为：

{ this.state.render &&
        <canvas ref="chart" height="400px" />
      }

这可能不是根本原因，只是要指出来。

Answer 2

您正在componentWillMount钩中请求数据，但是有可能在组件安装后（即在执行componentDidMount之后）得到响应。

不鼓励使用componentWillMount发出请求（请注意，该方法被认为是旧方法，应避免使用它）：

避免在此方法中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）。

此外，您的render方法正在为this.state.render分配一个值，而不是检查它是否为true来渲染canvas元素。

最后，存储在组件state中的数据应该是会影响要呈现的DOM的数据（因为调用setState会导致render方法执行）。但是在您的代码中，您是通过canvas来呈现图表。因此，图表的数据不会影响您正在呈现的DOM。

考虑到所有先前的点，您可以从一开始就渲染一个空的canvas元素（即不需要state.render），在componentDidMount钩子中发出请求，然后一次您掌握了信息，请绘制图表：

class BarChart extends Component {
    constructor(props){
        super(props);

        this.state = {};
    }

    componentDidMount() {
        this.getGraphs().then(info => {
            const data = {
                labels: info.categories,
                datasets: [{
                    label: "Number of Tweets by Sentiment Category",
                    backgroundColor: "blue",
                    data: info.count
                }]
            };

            this.renderChart(data);
        })
    }

    renderChart(data) {
        let el = ReactDOM.findDOMNode(this.refs.chart);
        let ctx = el.getContext("2d");

        let chart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                barValueSpacing: 20,
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0
                        }
                    }]
                }
            }
        });
    }

    getGraphs() {
        let ticker = this.state.crypto;
        let name = this.state.name;

        let URL = 'http://localhost:5000/api/getGraphs';

        return fetch(URL, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'name': name,
                'ticker': ticker,
            }
        })
        .then((response) => response.json())
    }

    render() {
        return (
            <div className='card'>
                <canvas ref="chart" height="400px" />
            </div>
        );
    } 
}

export default BarChart;

我还注意到，在getGraphs方法中，您正在从crypto中读取name和state属性，但是在您的问题中，您没有声明它们。

即使在控制台登录时图表变量正确显示，Chartjs也不呈现条形图

2 个答案: