javascript - 如何渲染从 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 渲染以查看页面上的值?
解决方案
我认为您的代码中有错字。它应该是:
const mapStateToProps = state => {
return {
...
selectvalue: state.selectvalue // Instead of state.value
};
};
推荐阅读
- firebase - 获取具有多个 where 条件问题的数据
- hive - 如何使用 CTAS 和 hive 中的位置创建与另一个表相同的表?
- javascript - Laravel 7 收银条每月订阅设置
- reactjs - React SetState 不会导致重新渲染,并且 forceupdate() 也不起作用
- amazon-web-services - 是否可以使用 AWS 承担角色运行赛普拉斯测试?
- php - 如何修复通过 ajax 下载的文件名的编码?
- eclipse - 尝试使用 Vaadin Designer 7 打开 .html 文件时出现 NullPointerException
- reactjs - Next js api not works on netlify
- vue.js - Vuex 在多个布局中无法从 iframe 正常工作
- robot - 使用 QiSDK 从 Pepper 上的 Android 应用程序获取 Pepper 的 IP,NAOqi 2.9