React中如何编写多个函数批量修改多个useState状态？

针对你的需求，这里提供两种实现思路，适配你当前的代码结构同时给出更优的状态管理方式：

方案一：适配现有拆分状态的写法 #

直接按照你已有的resetTime逻辑，编写changeToTwoTime函数即可：

// methods
const resetTime = () => {
    resetHour(0)
    resetMinute(0)
    resetSecond(0)
}

const changeToTwoTime = () => {
    resetHour(2)
    resetMinute(2)
    resetSecond(2)
}

方案二：更优的合并状态写法 #

拆分多个状态的方式在批量修改时会显得冗余，推荐将时间相关状态合并为一个对象，让状态管理更简洁：

1. 重构状态定义

const [time, setTime] = useState({
    hour: 4,
    minute: 8,
    second: 12
})

2. 重写操作函数

const resetTime = () => {
    setTime({ hour: 0, minute: 0, second: 0 })
}

const changeToTwoTime = () => {
    setTime({ hour: 2, minute: 2, second: 2 })
}

如果后续需要单独修改某个时间单位（比如仅修改小时），可以用展开运算符保留其他状态：

const updateHour = (newHour) => {
    setTime(prevState => ({ ...prevState, hour: newHour }))
}

3. 组件内使用状态时，通过解构获取对应值

const { hour, minute, second } = time;
// 后续渲染或使用时直接调用hour/minute/second即可

这种方式的优势：

• 减少独立状态变量的数量，逻辑更集中
• 批量修改只需调用一次状态更新函数，代码更简洁
• 后续扩展时间相关功能（如添加毫秒）时，修改成本更低

内容的提问来源于stack exchange，提问作者João Denari