styled-components按钮onClick首次点击不更新状态及代码冗余问询

问题1：首次点击按钮打印初始false的原因及解决方案 #

React的useState状态更新是异步批量执行的，你在调用状态更新方法后立即打印对应状态，拿到的是当前渲染周期的旧值，并非更新后的状态。
如果需要获取更新后的状态值，有两种可行方案：

• 在useEffect中监听对应状态的变化，变化后执行相关逻辑
• 直接使用状态更新时你传入的新值，不需要等待状态更新完成再取值

问题2：现有代码冗余优化方案 #

你当前的写法存在明显冗余，无需为每个按钮单独定义点击状态、背景色、文字色三类状态，也不需要写三个重复的点击处理函数，优化逻辑如下：

1. 仅用一个状态存储三个按钮的点击状态，按钮的背景色、文字色属于可通过点击状态派生的衍生值，无需单独存储为状态，避免后续出现状态不同步的问题
2. 封装通用点击处理函数，复用逻辑

优化后代码示例 #

// 仅保留源头状态：三个按钮的点击状态
const [btnStates, setBtnStates] = useState({
  day: false,
  week: false,
  month: false
})

// 通用点击处理函数，传按钮类型即可
const handleBtnClick = (type) => {
  setBtnStates(prev => ({
    ...prev,
    [type]: !prev[type]
  }))
  // 如果你需要立即拿到切换后的状态值，直接用 !btnStates[type] 即可
}

// 渲染部分直接根据状态计算样式
<ButtonContainer>     
  <Button 
    onClick={() => handleBtnClick('day')} 
    background={btnStates.day ? '激活背景色' : 'lightgray'} 
    color={btnStates.day ? '激活文字色' : 'gray'}
  >Day</Button>
  <Button 
    onClick={() => handleBtnClick('week')} 
    background={btnStates.week ? '激活背景色' : 'lightgray'} 
    color={btnStates.week ? '激活文字色' : 'gray'}
  >Week</Button>
  <Button 
    onClick={() => handleBtnClick('month')} 
    background={btnStates.month ? '激活背景色' : 'lightgray'} 
    color={btnStates.month ? '激活文字色' : 'gray'}
  >Month</Button>
</ButtonContainer>

优化后整体代码量减少近70%，逻辑更聚合，后续新增按钮也只需要在初始状态中新增对应键值即可，可维护性更高，且完全符合你不需要互斥逻辑的需求。

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