Question

我正在尝试学习 React，但我总是对 React 何时更新状态感到有些困惑。在下面的应用程序中，我有一个带有加号和减号按钮的计数器，我希望计数器在数字为正时具有一种样式，而在负数时具有不同的样式。所以我有两个状态变量，值和样式，我使用 useReducer 来更新它们。它似乎有效，但我这样做是否正确？有没有更好的方法来做到这一点？

import React, { useReducer, useState } from "react"
import classes from "./Home.module.css"

const ACTIONS = ["increment", "decrement"]

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS[0]:
            return { count: state.count + 1, styling: state.count+1>=0 ? "green" : "red" }
        case ACTIONS[1]:
            return { count: state.count - 1, styling: state.count-1>=0 ? "green" : "red"  }
        default:
            return { state }
    }
}

const Home = (props) => {
    const [state, dispatch] = useReducer(reducer, { count: 0, styling: "green" })

    const add = () => {
        dispatch({type: ACTIONS[0]})
    }

    const subtract = () => {
        dispatch({type: ACTIONS[1]})
    }


    

    return (
        <div className={classes.home}>
            <button className={classes.button} onClick={add}>
                +
            </button>
            <p className={`${classes.num} ${classes[`${state.styling}`]}`}>{state.count}</p>
            <button className={classes.button} onClick={subtract}>-</button>
        </div>
    )
}

export default Home

Answer 1

通常，您希望在状态中保留所需的最少信息量。计数是一种状态。样式可以是从计数状态派生的变量。它不需要成为状态的一部分。

我个人不会在这种情况下使用 useReducer。显然你可以，但这不是必需的。您可以将其简化为：

const [count, setCount] = useState(0);
 
const add = () => setCount(prevCount => prevCount + 1);
 
const subtract = () => setCount(prevCount => prevCount - 1);

const styling = count >= 0 ? “green” ? “red”;

使用 useReducer 更新状态

1 个答案: