Question

我是React / ES6的真正初学者，所以我的问题很简单。

如何通过多个获取的数据功能刷新多个Highcharts图-现在以相同的间隔获取的数据同时渲染图。

问题是：如何调用应呈现的组件多少次getData函数，以使每个图具有自己的数据。

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'


const options = {
   table: 'Chart 1',
   chart: {
     type: 'line',
     zoomType: 'xy'
   },
   title: {
     text: 'Chart 1'
   },
   series: [{
     data: []
   }]
 }


 const Value = () =>
   <p>{options.series[0].data[options.series[0].data.length-1]}</p>

 const Highchart = () => 
   <HighchartsReact
     highcharts={Highcharts}
     options={options}
     updateArgs={[true, true, true]}
   />

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {counter: null};
  }

  render() {
    if (this.state.counter) {
      return (
        <Counter 
          counter={this.state.counter}
          onExit={() => this.setState({counter:null})}
        />
      )
    } else {
      return (
        <div>
          <h2>Pick a Counter</h2>
          <button onClick={() => this.setState({counter:'simplest'})}  >Run</button><br/>
        </div>
      )
    }
  }
}

const getData = (opt) => {
  const Url = 'http://80.211.209.99/randArray.php';
  fetch(Url)
  .then(data=>{
    return data.json()
  })
  .then(res=>{
    options.series[0].data = res;
    opt.setState({number: opt.state.number + 1});
    console.log(options);
  })
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log(this.state.number, this.props.counter)
      getData(this);
    }, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.props.onExit}>Exit</button>
        <div className="tableDiv">
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          </div>
      </div>
    )
  }
}
render(<App/>, document.getElementById('root'))

Answer 1

假设http://80.211.209.99/randArray.php返回一个对象数组。

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.url = "http://80.211.209.99/randArray.php";
    this.state = { graphData: [] };
  }
  componentDidMount() {
    fetch(this.url)
      .then(data => {
        return data.json();
      })
      .then(res => {
        this.setState({ graphData: res });
      });
  }

  render() {
    const charts = this.state.graphData.map(graph => (
      <div key={graph.somekindifid} className="chartDiv">
        <Highchart {...passdatathatyouneedfromgraph} />
        <Value {...passdatathatyouneedfromgraph} />
      </div>
    ));

    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.props.onExit}>Exit</button>
        <div className="tableDiv">{charts}</div>
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

只需确保将正确的道具从图形对象传递到Highchart & Value。

我希望我理解

如何在功能上加载多个React组件的新数据

1 个答案: