How to render a value recived in mapStateToProps (REDUX)

问题

I am using reduce to store a value and then give it back. I am receiving it correcty but how to render automaticaly when is received?

The code of the code of mapStateToProps:

import React, { Component } from "react";
import { Tabs, Tag } from 'antd';
import { connect } from "react-redux";
import SelecionarCrypto from "./SelecionarCrypto";
import TableData from "./TableData";
import axios from "axios";
import moment from "moment";



  const { TabPane } = Tabs;

  class PruebasAPI3 extends Component {

    constructor(props) {
      super(props);
      console.log("(PruebasAPI3.js) constructor this.props: ", this.props)



      this.state = {
        mode: 'top',
        ObtenerdataETH: [],
        ObtenerdataBTC: [],
        DataFromApiTemp: [],
      };



    };



    //Cargamos las operaciones desde la Base de datos: 
    fetchData = () => {
      axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
      axios.defaults.xsrfCookieName = "csrftoken";
      axios.defaults.headers = {
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.token}`,
      };
      axios.get("http://xxxxxxxxx:8000/proveedores/api/operaciones/").then(
        res => this.setState({ DataFromApiTemp: res.data}));

        };




    //Obtener valor mercado de la crypto mondeas.
    GetPriceCurrencie = () => {
      const CoinbasePro = require('coinbase-pro');
      const publicClient = new CoinbasePro.PublicClient();
      //publicClient.getProductTicker(sobre).then(response=> alert(response.price))
      publicClient.getProductTicker('ETH-EUR').then(response => this.setState({ ObtenerdataETH: response}));
      publicClient.getProductTicker('BTC-EUR').then(response => this.setState({ ObtenerdataBTC: response}));


    };

    //Para el Tabs.
    handleModeChange = e => {
      const mode = e.target.value;
      this.setState({ mode });
    };

    componentDidMount() {
      this.GetPriceCurrencie();
    }

    componentWillReceiveProps(newProps) {
      console.log("BUGAcomponentWillReceiveProps", newProps)
      if (newProps.token) {
        this.GetPriceCurrenc();
      }
    }



    render() {

      console.log("(PruebasAPI3.js) render this.props: ", this.props)
      const { mode } = this.state;

      var Obtener = parseFloat(this.state.ObtenerdataETH.price);
      var ObtenerBTC = parseFloat(this.state.ObtenerdataBTC.price);


      function tralala(x, valorBtcOperacion, comision){
        // y = ((0.16*(x))/100)
        // z = (x - y);
        // a = z / valorBtcOperacion
        // v = a * Obtener
        // r = v - x

        var z = (x - ((comision*(x))/100));
        var a = z / valorBtcOperacion
        var v = a * Obtener //Valor actual de nuestra crypto
        var r = v - x

        //R es RENTABILIDAD
        //V es Valor Crypto a fecha actual.
        return [v.toFixed(2), r.toFixed(2)];
      }

      var result = { NuevosDatos: [] };
      var jsonObj;
      var TotalRentabilidad = 0;
      var TotalImporte = 0;

      this.state.DataFromApiTemp.forEach((value, key) => {

        console.log("1-key =>", key, "1-value =>", value.estado);
        if (value.estado == "Finalizado" && value.moneda_crypto == "ETH"){
          let resultado = tralala(value.compra_en_fiat,value.compra_crypto_valorOper,0.16)
          console.log(value.proveedor, " ", 
          "Fecha compra:", value.compra_fecha_oper,  " ",
          "importe: ", value.compra_en_fiat, " ",
          "comprado: ", value.compra_crypto_valorOper, " ",
          "Crypto vale ahora:", resultado[0], " ",
          "Rentabilidad", resultado[1], " ",



          )//Fin console
          console.log("Transformar de FECHA a DIAS:",moment().diff( value.compra_fecha_oper, 'days') )

          TotalRentabilidad += parseFloat(resultado[1]);
          TotalImporte +=  parseFloat(value.compra_en_fiat);

          var jsonObj = 
            { 
              "FechaCompra": value.compra_fecha_oper,
              "importe": value.compra_en_fiat,
              "Comprado": value.compra_crypto_valorOper,
              "CryptoValorActual": resultado[0],
              "Rentabilidad": resultado[1],
              "TiempoTranscurrido": moment().diff( value.compra_fecha_oper, 'days') + " Días"
            }


          result.NuevosDatos.push(jsonObj);


        }//fin if

      }); // fin de Foreach

      const encabezado = [
        {
          label: 'FechaCompra',
          field: 'FechaCompra',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Importe',
          field: 'importe',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Comprado',
          field: 'Comprado',
          sort: 'asc',
          width: 270
        },
        {
          label: 'CryptoValorActual',
          field: 'CryptoValorActual',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Rentabilidad',
          field: 'Rentabilidad',
          sort: 'asc',
          width: 270,
        },
        {
          label: 'TiempoTranscurrido',
          field: 'TiempoTranscurrido',
          sort: 'asc',
          width: 270,
        }


      ];


    console.log("Quiero ya:", this.props.selectvalue)








      return (
        <div>

          <Tag color="geekblue">ETH: {this.state.ObtenerdataETH.price} </Tag><Tag color="geekblue">BTC: {this.state.ObtenerdataBTC.price} </Tag>
          <br></br>
          <SelecionarCrypto />

        <Tabs defaultActiveKey="0" tabPosition="left" style={{ height: 220 }}>

             <TabPane tab="Operaciones Abiertas" key="0">
             <TableData data={result.NuevosDatos} Encabezado={encabezado}/>

            </TabPane>
            <TabPane tab="Operaciones Cerradas" key="1">
              Content of tabns 1

            </TabPane>

        </Tabs>

        <br></br>
        Select: {this.props.selectvalue}
        <br></br>


      </div>

    );
  }
  }

  const mapStateToProps = state => {
    console.log("recibe mapStateToProps: ", state)
    return {
      token: state.token,
      ValorState: state.ValorState,
      username: state.username,
      selectvalue: state.value  // <<<---- This one 

    };
  };

export default connect(mapStateToProps)(PruebasAPI3);

export default connect(mapStateToProps)(PruebasAPI3);

Nothing is showing UP when rendering.

How to render this value each time it´s received by: mapStateToProps ?

Some thing is not working correcty because the correct value is received from store redux but when using this.props inside nothing is showing up.

May be the use of this.props is not the correct way.

How can I render correcty my value that is received correcty?

来源：https://stackoverflow.com/questions/61351166/how-to-render-a-value-recived-in-mapstatetoprops-redux