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

【问题标题】：React Lifecycle- The plot is drawn using the initial state value, and not using the fetched valueReact Lifecycle - 使用初始状态值绘制绘图，而不是使用获取的值
【发布时间】：2020-02-28 05:36:35
【问题描述】：

我想从烧瓶中获取变量“r2score”的值。成功获取值。我什至写了一个 console.log(r2score) 语句来查看获取是否有效。这就是问题所在。最初它记录的值为 0.1，这是它的初始状态。然后在控制台的下一行中，它记录了一个 0.26 的值，该值是从烧瓶中获取的。所以至少提取是成功的。但是，正在绘制的绘图是用 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

【问题讨论】：

你不应该在constructor中执行api调用，在你的componentDidMount中移动获取函数。
我最初确实将它放在componentDidMount中，但是问题仍然存在。因此，我想把它放在构造函数中，只是为了看看它是否改变了任何东西。 @hussain.codes
除了在constructor 中调用 api 之外，我没有看到任何“错误”。如果render 中的控制台正在打印更新的状态值，那么我认为您应该检查ReactG2Plot 组件。
如果你的状态改变成功，那么组件肯定会呈现新的值。但主要问题是，这只会在组件第一次初始化（或第一次渲染）时运行一次
@DeepankarSingh 我猜状态正在改变。否则我不会在控制台中获得更新的值。您能否根据您的建议提出任何可能解决此问题的步骤？

标签： reactjs jsx react-lifecycle react-lifecycle-hooks

【解决方案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;

【讨论】：

你甚至不需要将它包装在一个 div 中。将密钥添加到 ReactG2Plot 也可以。