爲什麼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; 
}