React Lifecycle-使用初始状态值绘制图，而不使用获取的值

Question

我想从flask中获取变量'r2score‘的值。取值成功。我甚至编写了一条console.log(r2score)语句来查看获取是否有效。问题就在这里。最初，它的记录值为0.1，这是它的初始状态。然后在控制台的下一行中，它记录了一个值0.26，这是从flask中获取的值。因此，至少获取是成功的。但是，正在绘制的图的值是0.1(它的初始状态)，而不是0.26(它是获取的值)。

我的代码：

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

Answer 1

已经解决了这个问题。解决方案是将图形组件包装在

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

因此，每当键发生变化时，图都会重新构建。

我的代码：

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;