无法更新redux中的reducer状态

时间:2018-02-26 06:48:59

标签: reactjs redux react-redux

更改选择我想在reducer中保存值。但是我怎样才能将值传递给状态。 下面是我正在使用的代码。

容器/报头/ index.js

const changeCloud = () => {
  return ('hello');
}

const mapStateToProps = () => ({
  cloud: changeCloud(),
  menuItems: menuItems,
})

const mapDispatchToProps = (dispatch) => ({
  setCloud: () => {
    dispatch(setCloud('sf'));
  },
})

const Header = connect(
  mapStateToProps,
  mapDispatchToProps
)(HeaderPresentational);

组件/头/ index.js

setCloudClick(evt) {
    this.setState({
      value: evt.target.value,
    }, function () {
      this.props.setCloud('this.state.value');
    });
  }

render(){
    return(
    <select onChange={this.setCloudClick} value={this.state.value}>
        <option value="zscaler.net">zscaler.net</option>
        <option value="zscalerOne.net">zscalerOne.net</option>
        <option value="zscaler.net">ZscalerTwo.net</option>
        <option value="Zscaler Private Access">Zscaler Private Access</option>
    </select>
);
}

reducer.js

function reducer(state, action) {
  switch (action.type) {
    case 'SET_CLOUD' :
      alert(action.text);
      return state;
    default :
      return state;
  }
}
export default reducer;

1 个答案:

答案 0 :(得分:1)

从回调中,您需要传递IF @p_param IN('aa', 'bb', 'cc','dd') 而不是value

string

但是,当您在商店中存储价值时,您无需在本地存储它。您可以像

一样调度值

index.js

setCloudClick(evt) {
    this.setState({
      value: evt.target.value,
    }, function () {
      this.props.setCloud(this.state.value);  // pass this.state.value here
    });
  }

容器/报头/ index.js

setCloudClick(evt) {
    this.setState({
      value: evt.target.value,
    }, function () {
      this.props.setCloud(this.state.value);
    });
  }

render(){
    return(
         <select onChange={this.setCloudClick} value={this.state.value}>
            <option value="zscaler.net">zscaler.net</option>
            <option value="zscalerOne.net">zscalerOne.net</option>
            <option value="zscaler.net">ZscalerTwo.net</option>
            <option value="Zscaler Private Access">Zscaler Private Access</option>
        </select>
    );
}