React Redux数字增减异常：输入数字未实现加减而是拼接

问题原因 #

输入框的event.target.value本质是字符串类型，哪怕你给handleValue初始值设为0，触发输入事件后，setHandleValue会把值存成字符串。Reducer里做加法时，字符串和数字相加会执行字符串拼接，就出现了你截图里的异常；减法能自动隐式转数值，所以不会有拼接，但为了逻辑统一还是要处理类型问题。

解决方案 #

方案一：输入时直接转数值

修改输入处理函数，把输入值转为数字再存入状态：

function handleChange(event){
    // Number()可处理整数和小数，若要只保留整数用parseInt(event.target.value, 10)
    setHandleValue(Number(event.target.value))
}

方案二：在Reducer中统一转类型

如果不想改动输入逻辑，就在Reducer里强制转换payload的类型：

const reducer = (state = defaultState, action) => {
    switch (action.type){
        case "ADD_CASH":
            return {...state, cash: state.cash + Number(action.payload)}
        case "GET_CASH":
            return {...state, cash: state.cash - Number(action.payload)}
        default:
            return state
    }
}

TypeScript的优势 #

你猜的没错，用TypeScript的话这种问题在编译阶段就能被发现——只要给handleValue和action的payload定义number类型，TS会直接报错提示类型不匹配，根本不会等到运行时才出问题。

异常现象截图：

内容的提问来源于stack exchange，提问作者therepanic