如何在组件中接收先前发送到 redux 存储的值。 （始终未定义）

Question

您好，我正在将值从 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 

  };
};

这是收到的道具：

为什么我总是未定义？ 如果我的组件在值更改时连接到存储不应该获取值？

关于reducer代码的信息：（部分代码： )

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;

Answer 1

如果不知道你的 reducer 是如何实现的，这很难说，但我觉得有两种可能性：

• 您没有在 reducer 中正确定义 selectValue
• 您正确定义它，但使用了一个突变，因此不会触发您的反应组件的重新渲染