Question

我每次点击一个按钮时都会尝试使用React和Redux来增加道具的值。然而，由于某种原因，道具被视为NaN。

这是我的减速机：

export default function(){
  return 0;
}

另一个减速器：

export default function (state = null, action) {
    switch (action.type) {
        case 'VALUE_INCREMENTED':
            return action.payload;
            break;
    }
    return state;
}

这是我的行动：

export const incrementValue = (val) =>{
  console.log("You incrementend the value to: ", val+1);
  return {
    type: 'VALUE_INCREMENTED',
    payload: val+1
  }
};

这就是容器：

class Thermo extends Component{
  getValue(){
    return this.props.val;
  }


  render(){
    return(
          <div>
              <Thermometer
                      min={0}
                      max={90}
                      width={10}
                      height={230}
                      backgroundColor={'gray'}
                      fillColor={'pink'}
                      current={this.props.val}
              />
              <input type = "submit" onClick={() => this.props.incrementValue(this.props.val)}value="+"/>
          </div>
    )
  }
}

function mapStateToProps(state){
  return{
    val: state.val
  };
}

function matchDispatchToProps(dispatch){
  return bindActionCreators({incrementValue: incrementValue}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Thermo);

Answer 1

这里您将初始状态设置为null;

export default function (state = null, action) {
    switch (action.type) {
        case 'VALUE_INCREMENTED':
            return action.payload;
            break;
    }
    return state;
}

如果你将reducer更改为以下，你将有一个默认状态对象，其中一个键为val，值为0.然后，当你将状态映射到props时，它将得到正确的值，而不是未定义的。

var initialState = {
  val: 0
}

export default function (state = initialState, action) {
    switch (action.type) {
        case 'VALUE_INCREMENTED':
            return {...state, val: action.payload};
            break;
    }
    return state;
}

Answer 2

您需要在缩减器中使用初始状态，例如

export default function(state=0){
  return state;
}

为什么ES6将其视为NaN？

2 个答案: