Question

我正在一个项目中工作，该项目包含不同的选项卡，在每个选项卡中我们都可以看到一个图形，其中显示了通过调用API获得的数据。（每个标签（图形）都在执行ComponentDidMount()来获取相关数据）。

鉴于我希望能够通过生成数据的模型的run_id（ job_name ）过滤数据，我添加了一个下拉菜单，该菜单允许选择特定的< strong> job_name ，它被添加到ComponentDidMount()中URL的末尾，以仅选择已实现的作业的数据。目的是自动显示该作业的数据图。

在这里，每次我要将所有数据传递给图形函数时，我们都可以看到ComponentDidMount()。

componentDidMount() {
    const jobName = this.props.jobName;
    this.props.getFuelPrices(`http://localhost:8000/data/stack/fuel/${jobName}`);
  }

其中getFUelPrices(url)是对API的调用

主页的结构为：

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

        this.state = {
            tabActive: 'fuel-price',
            jobName: 'julia-stacking-model-test-f353caae-729b-4a0a-b0f7-7640b4f4f1f9',
        };
    }

    handleSubmit = event => event.preventDefault();
    handleOnChange = (e) => {
                              this.setState({
                                jobName: e.target.value,
                              })
                            };

在handleOnChange()中，我们是从下拉列表中选择新作业的地方。

render () {
      if(!this.props.user || this.props.user.role < this.props.acl)
          return <AccedDenied />
      return (


          <div className="Stack">

            <BreadCrumb />

            <div className="card-box">
              <div className="test" style={{margin: "20px"}}>
                <form onSubmit={this.handleSubmit} className="form-inline">

                  <label style={{marginLeft: '20px'}}>
                    Select Job:
                    <JobNames onChange={this.handleOnChange}/>
                  </label>

                  <label style={{marginLeft: '20px'}}>
                    Compare with job:
                    <JobNames />
                  </label>

                </form>
              </div>
              <TradesTabs
                data={[
                  {
                    key: 'fuel-price',
                    label: 'Fuel Price',
                    action: () => this.setState({ tabActive: 'fuel-price'}),
                  },
                  {
                    key: 'total-stack',
                    label: 'Total Stack',
                    action: () => this.setState({ tabActive: 'total-stack' }),
                  }, ..........


            active={this.state.tabActive}
            />

            <div className="tab-content">
              {this.state.tabActive === 'fuel-price' ? <TotalFuelPrice jobName={this.state.jobName}/> : console.log("not showing fuel price graph", this.state.jobName)}
              {this.state.tabActive === 'total-stack' ? <TotalStack jobName={this.state.jobName}/> : console.log("not showing total stack graph", this.state.jobName)}
              {this.state.tabActive === 'nuclear' ? <TotalNuclear jobName={this.state.jobName}/> : console.log("not showing nuclear graph", this.state.jobName)}
              {this.state.tabActive === 'solarwind' ? <TotalSolarWind jobName={this.state.jobName}/> : console.log("not showing solarwind graph", this.state.jobName)}
              {this.state.tabActive === 'hydro' ? <TotalHydro jobName={this.state.jobName}/> : console.log("not showing solarwind graph", this.state.jobName)}
            </div>
          </div>
        </div>

因此，这里我将选定的JobName发送到不同的 TotalComponents ，它们对API进行ComponentDidMount()调用并生成图形。

没什么，当我这样做时，我会正确更新状态，但是除非刷新应用程序，否则我的图形不会显示新数据。更精确地说，当从下拉菜单中选择一个选项时：

class JobNames extends Component {

  componentDidMount() {
    this.props.getJobNames('http://localhost:8000/data/stack/getJobs');
  }

  render() {

    let jobs = this.props.jobname;
    let optionItems = jobs.map((job) =>
            <option key={job.name}>{job.name}</option>
        );

    return (
      <div>
         <select className="form-control" style={{marginLeft: '8px'}} onChange={this.props.onChange}>
            {optionItems}
         </select>
      </div>
    );
  }
}

我的图形正在重新渲染，因为线条颜色由于选择颜色的Math.random函数而改变，但是图形的数据不会自动更新。

我知道这不是有史以来最好的解释，但是我已经尽力弄清楚了。不要犹豫，询问更多细节或提出问题。

如何解决此问题？目的是从下拉菜单中选择一个选项，并自动获得显示的新图形。

图形部分是：

class FuelPriceGraph extends Component {

  render(){
    {
    const COLORS = ['   #ff0000','#ffff00','#00ffff','#ff00ff','#00ff00','#cc33ff','#f81e46','#3ea6e3','#f31ac9','#a6fbc7','#01d128', '#3dfc92','#4965e0', '#ef6a0c','#f81108','#f3f609', '#6e23fb', '#cf22c2', '#5aeef7', '#a1fd20','#9babe3', '#fa6c45','#e74885','#dc0508'];
    let json = this.props.data;
    console.log("the data for is" ,json);

    return (
      <div className="FuelPriceGraph">
        <ResponsiveContainer width="100%" aspect={5 / 1}>
          <LineChart width={800} height={350}>
            <CartesianGrid strokeDasharray="3 3"/>
            <XAxis dataKey="date" type="category" allowDuplicatedCategory={false} />
            <YAxis dataKey="price"/>
            <Tooltip/>
            <Legend />
            {json.map(s => {
                let color = COLORS[Math.floor(Math.random() * COLORS.length)];
                let type = (s.scenario === "mean-scenario") ? "5 5" : "" ;
                return <Line dataKey="price" data={s.data} name={s.scenario} key={s.scenario} stroke={color} strokeDasharray={type}/>
                }
            )}

          </LineChart>
        </ResponsiveContainer>
      </div>

谢谢

React / Redux更新状态，但是重新渲染不更新图形数据

0 个答案: