ReactJS 增量器 ++ 在 useReducer 中不起作用

Question

我有一个简单的 useReducer 增量计数器。

import {useReducer} from 'react'



const counterStateFn =  (state,action) => {
 if(action.type === "INCREMENT") {
     return {count : state.count++}
 }
 if(action.type === "DECREMENT") {
    return {count : state.count--}
}
 return {count: 0}
}

const Counter = () => {

    const [counterState, modifierCounterState] = useReducer(counterStateFn,{count: 0});
    
   

    const modifierCounterStateIncrementFn = () => {
        modifierCounterState({type:"INCREMENT"});
    }


    const modifierCounterStateDecrementFn = () => {
        modifierCounterState({type:"DECREMENT"})
     }

    return (
        <div className="counter-wrap">

            <button onClick={modifierCounterStateIncrementFn}>Increment(+)</button>
            <span>Count is: {counterState.count}</span>
            <button onClick={modifierCounterStateDecrementFn}>Decrement(-)</button>
        </div>
    );
}

export default Counter;

在 counterStateFn 中，我使用 {count : state.count++} 和 {count : state.count--} 来递增和递减计数器，但这不起作用。

如果我使用 {count : ++state.count} 或 {count : state.count+1} 它会起作用。

我想知道为什么 {count : state.count++} 和 {count : state.count--} 不起作用。

谢谢。

Answer 1

如其文档所述，Increment (++) operator 如果用作后缀，它会递增并且 returns 值 在递增 之前

虽然您希望值 AFTER 递增以触发状态更改。

大家可以在Devtools中自行查看：

x = 5;
x++ // returns 5

y = 5;
++y // returns 6

Answer 2

正如 Dennis x++ 运算符所指出的 returns 值然后递增。

要解决您的问题，您可以使用 ++count 或 count + 1。

const counterStateFn =  (state,action) => {
 if(action.type === "INCREMENT") {
     return {count : state.count + 1}
 }
 if(action.type === "DECREMENT") {
    return {count : state.count - 1}
}
 return {count: 0}
}

ReactJS 增量器 ++ 在 useReducer 中不起作用

ReactJS incrementor++ not working inside useReducer

javascript

increment

reactjs

use-reducer