首页 > 解决方案 > 如何渲染从 REDUX 接收到的值

问题描述

我在 ReactJS 中有这个简单的示例页面测试:

在此处输入图像描述

在更改时,选择的新值被发送到 STORE (REDUX)。

这是代码:

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import SelecionarCrypto from "./SelecionarCrypto";

  class PruebasAPI4 extends Component {

    constructor(props) {
      super(props);

    }

    render() {

      return (
        <Fragment>
          Test4
          <br></br>
          <br></br>
          <SelecionarCrypto />
          <br></br>

          Value of select (Typeof): {typeof this.props.selectvalue}
        <br></br>
        Value of select (props): {this.props.selectvalue}
        {console.log("Test inside retun value of this.props ",this.props )}
        <br></br>

        </Fragment>

    );
  }
}

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

  };
};


export default connect(mapStateToProps)(PruebasAPI4);

在 mapStateToProps 中正确接收到所选值

在此处输入图像描述

从 store 接收新值时页面未呈现,并且该值始终未定义。

在此处输入图像描述

如何映射接收到的值以及每次更改 ocure 渲染以查看页面上的值?

标签: javascriptreactjsredux

解决方案


我认为您的代码中有错字。它应该是:

const mapStateToProps = state => {
  return {
    ...
    selectvalue: state.selectvalue  // Instead of state.value

  };
};

推荐阅读