javascript - 如何在组件中接收先前发送到 redux 存储的值。(始终未定义)
问题描述
嗨,我正在将值从 select 发送到 redux Store:
import React, { Component } from 'react';
import { Select } from 'antd';
import { connect } from "react-redux";
import * as actions from '../store/actions/select';
class SelecionarCrypto extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onBlur = this.onBlur.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onSearch = this.onSearch.bind(this);
console.log("(SelecionarCryto.js):",this.props);
this.state = {
ValorState: "nada"
}
};
onChange(value) {
console.log(`selected ${value}`);
this.setState({ValorState: value});
console.log("(SelecionarCryto.js) New value onchange", this.state.ValorState)
this.props.onSelectCrypto(value)
}
onBlur() {
console.log('blur');
}
onFocus() {
console.log('focus');
}
onSearch(val) {
console.log('search:', val);
}
render(){
const { Option } = Select;
console.log("(SelecionarCryto.js) New value Render: ", this.state.ValorState)
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Seleciona:"
optionFilterProp="children"
onChange={this.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
onSearch={this.onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="ETH">ETH</Option>
<Option value="BTC">BTC</Option>
<Option value="XRP">XRP</Option>
</Select>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
selectvalue: state.value
};
};
//Dispaching to STORE:
const mapDispatchToProps = (dispatch) =>{
return{
onSelectCrypto: (value) => dispatch(actions.SelectCrypto(value))
}
};
export default connect(mapStateToProps, mapDispatchToProps)(SelecionarCrypto);
使用控制台,我可以看到每次使用 select 时的工作方式和操作都在变化。
这部分代码是我连接到商店以接收道具的地方:
const mapStateToProps = state => {
console.log("recibe mapStateToProps: ", state)
return {
token: state.token,
ValorState: state.ValorState,
username: state.username,
selectvalue: state.value // <<<---- This one
};
};
这是收到的道具:
为什么我总是未定义?如果我的组件在值更改时连接到存储不应该获取值?
关于减速器代码的信息:(部分代码:)
const SelectCryptoValue = (state, action) => { // <--- This one.
console.log("necesito esto:", state, " ", action)
return updateObject(state, {
selectvalue: action.value,
error: null,
loading: false
});
}
const reducer = (state=initialState, action) => {
switch (action.type) {
case actionTypes.AUTH_START: return authStart(state, action);
case actionTypes.AUTH_SUCCESS: return authSuccess(state, action);
case actionTypes.AUTH_SUCCESS_USERNAME: return authSuccessUsername(state, action);
case actionTypes.AUTH_FAIL: return authFail(state, action);
case actionTypes.AUTH_LOGOUT: return authLogout(state, action);
case actionTypes.SELECT_CRYPTO: return SelectCryptoValue(state, action);
default:
return state;
}
}
export default reducer;
解决方案
如果不知道你的减速器是如何实现的,很难说,但我觉得有两种可能性:
- 您没有在减速器中正确定义 selectValue
- 您正确定义它但使用突变因此不会触发您的反应组件的重新渲染
推荐阅读
- multi-tenant - 在多租户环境中使用 AWS Kinesis Firehose
- java - 天蓝色函数 java CosmosDBTrigger-input 和 @SignalROutput-output,错误:无法创建集合信息
- elasticsearch - Elasticsearch 7.5.2 集群默认只为索引创建一个分片
- excel - Application.ActiveWorkbook.Path 的 ASFolder 字符串和“\”返回运行时“91”
- html - 当我缩小屏幕时,css元素会重叠
- eclipse - web.xml 丢失并且
设置为 true 不适用于配置文件 - spring - 通过 jdbc 批量更新自动递增版本
- c# - 抽象类C#中嵌套泛型/嵌套泛型的继承
- wordpress - hypens 在 URL wordrpess 中没有唤醒
- wordpress - 为什么我的页眉在 wordpress 中显示我的页脚?