Реактивный жизненный цикл - график рисуется с использованием начального значения состояния, а не с использованием выбранного значения - PullRequest
Новая
       28

Реактивный жизненный цикл - график рисуется с использованием начального значения состояния, а не с использованием выбранного значения

0 голосов
/ 28 февраля 2020

Я хочу получить значение переменной 'r2score' из flask. Значение получено успешно. Я даже использовал оператор 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;

Изображение консоли

Инструменты разработки React

1 Ответ

1 голос
/ 28 февраля 2020

решили проблему. Решение состояло в том, чтобы обернуть компонент графа в 

<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;
...