無法在React-Redux中使用VictoryBar繪制條形圖

Question

我無法使用Victory Library中的VictoryBar繪制React的條形圖。 我正在使用數據庫中的數據，使用Redux和axios中間件將數據帶到最前端。

有效負載正在更新，但是React組件的狀態例如只會變大。 來自1個國家/地區的數據給出了一個對象數組=26。當我再次單擊按鈕時，它將對象串聯在一起，現在是52個對象數組。 這會歪曲圖形，因為它沒有刷新數據。

---

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import { Link } from 'react-router';
    import { VictoryChart } from 'victory-chart';
    import { VictoryLine } from 'victory-line';
    import { VictoryAxis } from 'victory-axis';
    import { VictoryBar } from 'victory-bar';
    import { getWaterData } from '../actions/get_water_data';
    import CountryList from '../containers/countryList';

    // console.log('Printing the Water Data', waterData);

    var plottingData = [
      { x: '1990', y: 0 },
      { x: '1992', y: 0 },
      { x: '1994', y: 0 },
      { x: '1996', y: 0 },
      { x: '1998', y: 0 },
    ];
    var processWaterData;

    class VictoryPlots extends Component {
      constructor(props) {
        super(props);
        getWaterData();
        this.update = this.update.bind(this);
        this.state = {
          processed: plottingData,
          count: 2,
          countryId: 1,
          // waterData: getWaterData(),
        };

      }

      processingData() {
        processWaterData = [];

        for (var i = 0; i < this.props.waterData.length; i++) {
          processWaterData.push({x: this.props.waterData[i].year, y: this.props.waterData[i].value });
        }

        // return processWaterData;
        this.setState({ processed: processWaterData}, function() {
          console.log("SET State", this.state.processed);
        });

      }

      // data= { this.state.data } />
      // this.props.getWaterData();

      onInputChange(pCountry) {
        this.setState({ processed: [{x:'1990', y: 100}] });
        this.setState({countryId: pCountry}, function() {
          console.log("countryID: ", this.state.countryId);
        });

      }

      render() {
        return (
          <div>

            <div>
              <input value = { this.state.countryId }
              onChange = { event => this.onInputChange(event.target.value)} />
            </div>

          <Link to="/">Main</Link>

          <button onClick = { this.processingData.bind(this) } >
          Plot Graph
          </button>

          <button onClick = { () => { this.props.getWaterData(this.state.countryId);}}>
          Water Data
          </button>


          <VictoryChart >
            <VictoryBar
              data = { this.state.processed }
              dataAttributes= {[
              {fill: "cornflowerblue"}
              ]}
              />
          </VictoryChart>
        </div>
        );

      }
    }; // End of Component

    function mapStateToProps({ waterData }) {
      // console.log('WATER STATE:', { waterData });
      return { waterData };
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators({ getWaterData: getWaterData }, dispatch);
    }

    export default connect(mapStateToProps, mapDispatchToProps)(VictoryPlots);

VictoryBar： React的VictoryBar圖表

我不確定如何更新圖表的狀態，以便在更新輸入框中的輸入時更新圖表。 我使用this.state.processed以更新的信息VictoryBar 。 this.props.waterData是從Redux Promise接收到的數據，該數據會返回每個國家的正確數據，但是每次我單擊Plot Graph時，它就會被連接到this.state.waterData 。 每次單擊“繪圖圖”時，我都希望它生成一個新的繪圖。

---

那是我的錯誤，我已經解決了該問題，並嘗試了多種方法來單擊“繪圖圖”按鈕來更新組件的狀態。 為了更加清楚，我將粘貼動作減少器，也許是我要在此處完成的操作的屏幕截圖。

行動減速器（get_water_data.js）

    import axios from 'axios';

    // Send action to server
    export const GET_WATER_DATA = 'GET_WATER_DATA';

    export function getWaterData(pCountryId) {
      // console.log('Calling Water Data Function');

      const url = '//localhost:3001/api/statistics/' + pCountryId;
      // console.log(url);
      const request = axios.get(url);

      // console.log('PROMISE:', request.data);

      return {
        type: GET_WATER_DATA,
        payload: request,
      };
    }

更新后的代碼可以正常工作，但是我正在改變數組並且使用了拼接，這不是每次單擊“繪圖圖”時在屏幕上呈現新數據的正確方法。 我希望以正確的方式實施此方法，但我認為我不知道該怎么做。

    processingData() {
      var processWaterData = []

      for (var i = 0; i < this.props.waterData.length; i++) {
        processWaterData.push({x: this.props.waterData[i].year, y: this.props.waterData[i].value });
      }

      this.setState({ processed: processWaterData}, function() {
        // console.log("processed info after: ", this.props.waterData);
        if (this.props.waterData.length > 1) {
          // console.log("Length of the waterData:", this.props.waterData.length);
          this.props.waterData.splice(0, this.props.waterData.length);
        }
      });
    }

勝利條形圖顯示了各國水資源的改善

Answer 1

看起來像一個簡單的錯字：

// return processWaterData;
    this.setState({ processed: processed}, function() {

應該：

// return processWaterData;
    this.setState({ processed: processWaterData}, function() {