Question

我首先使用静态值创建了一个带有d3.js的饼图。但是，现在我想从我的服务器接收数据并用它更新饼图的数据。

为此，我在我的React组件中进行了一次AJAX调用，代码为：

import React from 'react';

class RingChart extends React.Component {
  loadPieChart() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({dataPie: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

  constructor(props) {
    super(props);
    this.state = {dataPie: []};
  }

  componentDidMount() {
    this.loadPieChart();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }

  render() {
    return (
    <div className="chart">
      <h3>Title chart</h3>
      <div className="ring" data-valid={this.state.dataPie.nbValid} data-unvalid={this.state.dataPie.nbUnValid} data-pourcentage={this.state.dataPie.pourcentage}></div>
    </div>
    );
  }
}

export default RingChart;

我有一个创建饼图的js脚本，在这个脚本中我想收集数据属性的值，如下所示：

$(document).ready(function() {
  var valid = $(".ring").data("valid");
  console.log(valid);
});

但是控制台说有效是未定义的，当我直接在控制台中执行此代码时，返回正确的值。

所以我认为在AJAX调用完成之前调用脚本。但我不知道如何在React.js

中解决这个问题

我的js脚本和d3.js在index.html中被调用...我认为这在React.js中是一个坏方法，但我没有设法用另一种方式来做。

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="container" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    <script src="js/d3.min.js" charset="utf-8"></script>
    <script src="public/bundle.js" type="text/javascript"></script>
    <script src="js/ringChart.js"></script>
  </body>
</html>

任何人都有解决方案吗？

在React.js中调用AJAX后获取attr的值

0 个答案: