reactjsjsxreact-lifecyclereact-lifecycle-hooks

React Lifecycle- The plot is drawn using the initial state value, and not using the fetched value


I want to fetch the value of the variable 'r2score' from flask. The value is fetched successfully. I even wote a console.log(r2score) statement to see if the fetching works. Here's the problem. Initially it logged a value of 0.1, which is its initial state. then in the next line of the console it logged a value of 0.26, which the value that was fetched from flask. So atleast the fetching was successful. However, the plot that is being drawn, is drawn with a value of 0.1(it's initial state) and not 0.26(it's fetched value).

My Code:

import ReactDOM from "react-dom";
import React from "react";

import { Liquid } from "@antv/g2plot";
import ReactG2Plot from "react-g2plot";

class R2ScorePlot extends React.Component {
  constructor(props) {
    super(props);
    this.state = { r2score: 0.1 };

  }

  componentDidMount() {
  fetch(`/fetch_regressionmodel`)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Something went wrong ...");
        }
      })
      .then(info =>
        this.setState({
          r2score: info.R2score
        })
      ).then(    this.forceUpdate()      )
      .catch(error => this.setState({ error }));
  }
  shouldComponentUpdate() {
    return true;
  }
  render() {
    const { r2score } = this.state;
    console.log(r2score);

    const config = {
      title: {
        visible: false,
        text: ""
      },
      description: {
        visible: false,
        text: ""
      },
      min: 0,
      max: 1,
      value: r2score,
      statistic: {
        formatter: value => ((1 * value) / 1).toFixed(1)
      }
    };
    return (
      <div>


        <ReactG2Plot Ctor={Liquid} config={config} />
      </div>
    );
  }
}
export default R2ScorePlot;

Console Image

React Dev Tools


Solution

  • Have solved the issue. The solution was to wrap the graph component in a

    <div key={r2score}>...</div>
    

    So that the graph will rebuild whenever, the key changes.

    My code:

    import ReactDOM from "react-dom";
    import React from "react";
    
    import { Liquid } from "@antv/g2plot";
    import ReactG2Plot from "react-g2plot";
    
    class R2ScorePlot extends React.Component {
      constructor(props) {
        super(props);
        this.state = { r2score: 0.1 };
    
      }
    
      componentDidMount() {
        fetch(`/fetch_regressionmodel`)
          .then(response => {
            if (response.ok) {
              this.setState({ spinloading: false });
              return response.json();
            } else {
              throw new Error("Something went wrong ...");
            }
          })
          .then(info =>
            this.setState({
              r2score: info.Explained_Variance_score
            })
          ).catch(error => this.setState({ error }));
      }
      shouldComponentUpdate() {
        return true;
      }
      render() {
        const { r2score } = this.state;
        console.log(r2score);
    
        const config = {
          title: {
            visible: false,
            text: ""
          },
          description: {
            visible: false,
            text: ""
          },
          min: 0,
          max: 1,
          value: r2score,
          statistic: {
            formatter: value => ((1 * value) / 1).toFixed(1)
          }
        };
        return (
          <div key={r2score}>
            <ReactG2Plot Ctor={Liquid} config={config} />
            </div>
        );
      }
    }
    export default R2ScorePlot;