为什么ES6将此视为NaN？

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

您需要减速器中的初始状态，例如

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

Answer 2

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

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

如果你改变你的减速以下，那么你将有一个默认的状态对象与VAL键和值0。然后，当你映射状态的道具，将得到正确的值，而不是不确定的

。

var initialState = { 
    val: 0 
} 

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