2 次 onSubmit 点击后反应组件更新

Question

我有一个图表组件，当我在表单中输入数据时第一次单击 onSubmit 时会更新，但是当我再次输入数据时，它需要单击 2 次才能更新图表。我有一个包含表单的 DataVars 组件，将输入添加到 props，然后呈现图表组件 Charter

import React, {Component} from 'react'
import Charter from './Charter'

class DataVars extends Component{
    constructor() {
        super();
        this.state = {
            interest_rate:'0.5',
        }
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit(event){
        event.preventDefault();
        this.setState({
             interest_rate: this.element.value
         },
        () => { console.log("setState completed", this.state) });
    }

    render(){
        return(
        <div>
            <Charter interest_rate={this.state.interest_rate}/>

            <form onSubmit={this.handleSubmit}>
                <input type="text" name="interest_rate" ref={el => this.element = el} />
                <input type="submit" value="Submit" />
            </form>
        </div>

    );
    }
}

export default DataVars


//Charter.js
import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';

var data = {
  labels: ["Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6","Year 7","Year 8","Year 9","Year 10"],
  datasets: [
    {
      label: "First dataset",
      data: [],
      fill: false,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    }
  ]
};

export default class LineDemo extends Component {

  componentDidMount(){
      var initial_value =10
      data.datasets[0].data = this.compoundList(initial_value)
      console.log(data.datasets[0].data[0])
      let lineChart = this.reference.chartInstance
      lineChart.update();
  }

  componentDidUpdate(){
      var initial_value =10
      data.datasets[0].data = this.compoundList(initial_value)
      console.log(data.datasets[0].data[0])
      let lineChart = this.reference.chartInstance
      lineChart.update();
  }

  compoundList(initial_value){
    var current_value =initial_value
    const interest_rate = this.props.interest_rate
    var compoundList =[];

    for (var i =0; i < 10; i++){
      current_value = this.calculateCompound(current_value, interest_rate)
      compoundList.push(current_value);
    }
    return compoundList;
  }

  calculateCompound(current_value, interest_rate){
    return current_value + (current_value * interest_rate)
  }

render(){
  return (
      <div>
        <Line data={data} ref={(reference) => this.reference = reference}/>
        <h1>Interest Rate: {this.props.interest_rate}</h1>
      </div>
    );
  }


}

我尝试在 setState 之后触发控制台日志命令，但我仍然遇到同样的问题。有没有办法只在状态更新后渲染Charter组件而不是异步渲染？

感谢您的意见。

Answer 1

或者，您可以将数据存储在状态中，并让Line 在状态更改时重新渲染，而不是手动更新，

// charter.js
import React, { Component } from "react";
import { Line } from "react-chartjs-2";
import Chart from "chart.js";

// var data = {
//   labels: [
//     "Year 1",
//     "Year 2",
//     "Year 3",
//     "Year 4",
//     "Year 5",
//     "Year 6",
//     "Year 7",
//     "Year 8",
//     "Year 9",
//     "Year 10"
//   ],
//   datasets: [
//     {
//       label: "First dataset",
//       data: [],
//       fill: false,
//       backgroundColor: "rgba(75,192,192,0.2)",
//       borderColor: "rgba(75,192,192,1)"
//     }
//   ]
// };

export default class Charter extends Component {
  state = {
    data: {
      labels: [
        "Year 1",
        "Year 2",
        "Year 3",
        "Year 4",
        "Year 5",
        "Year 6",
        "Year 7",
        "Year 8",
        "Year 9",
        "Year 10"
      ],
      datasets: [
        {
          label: "First dataset",
          data: [],
          fill: false,
          backgroundColor: "rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)"
        }
      ]
    }
  };
  componentDidMount() {
    var initial_value = 10;
    let data = this.state.data;

    data.datasets[0].data = this.compoundList(initial_value);
    console.log(data.datasets[0].data[0]);
    let lineChart = this.reference.chartInstance;
    lineChart.update();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.interest_rate !== this.props.interest_rate) {
      var initial_value = 10;
      let data = this.state.data;
      data.datasets[0].data = this.compoundList(initial_value);
      console.log(data.datasets[0].data[0]);
      // let lineChart = this.reference.chartInstance;
      // lineChart.update();
      this.setState({ ...data });
    }
  }

  compoundList(initial_value) {
    var current_value = initial_value;
    const interest_rate = this.props.interest_rate;
    var compoundList = [];
    console.log("+++ called +++");

    for (var i = 0; i < 10; i++) {
      current_value = this.calculateCompound(current_value, interest_rate);
      compoundList.push(current_value);
    }
    return compoundList;
  }

  calculateCompound(current_value, interest_rate) {
    return current_value + current_value * interest_rate;
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.data}
          ref={reference => (this.reference = reference)}
        />
        <h1>Interest Rate: {this.props.interest_rate}</h1>
      </div>
    );
  }

}

Answer 2

设法解决它

this.reference = reference} width={5} height={1} redraw/>

你需要添加重绘