React实现按钮点击切换图片需点击两次才生效问题

• React状态更新是异步批处理机制：调用状态更新方法后，当前同步执行的代码里读取到的还是更新前的旧状态值。你原来的逻辑是先更新按钮按下状态，紧接着就用旧的按钮状态判断要切换的图片，最后用旧的imageSelected值操作DOM，所有逻辑都滞后一次更新，才会出现需要点两次、切换按钮时响应错乱的问题。
• 违背React状态驱动渲染的设计原则：在React组件中用jQuery直接修改DOM样式属于冗余操作，状态变更后组件会自动重渲染，直接将样式和状态绑定即可，手动操作DOM很容易出现状态和界面不一致的问题。
• 原有JSX结构存在多余的闭合符号、标签嵌套层级错误，会导致DOM渲染结构不符合预期。

核心修复逻辑：点击时先计算出两个按钮点击后的最新状态，基于最新状态直接匹配对应要展示的图片，再一次性更新所有状态，完全移除jQuery操作，把背景图样式直接绑定到状态上，随组件渲染自动更新。

function App() {
  const [leftButtonPressed, setLeftButtonPressed] = useState(false)
  const [rightButtonPressed, setRightButtonPressed] = useState(false)

  const switchImage = (btnIndex) => {
    // 直接计算点击后的最新按钮状态，不依赖异步更新的state值
    const nextLeftStatus = btnIndex === 0 ? !leftButtonPressed : leftButtonPressed
    const nextRightStatus = btnIndex === 1 ? !rightButtonPressed : rightButtonPressed

    // 批量更新按钮状态
    setLeftButtonPressed(nextLeftStatus)
    setRightButtonPressed(nextRightStatus)
  }

  // 直接根据按钮状态派生当前要展示的图片，不需要单独维护imageSelected状态，避免状态不同步
  const currentBg = (() => {
    if (!leftButtonPressed && !rightButtonPressed) return imagesArray[2]
    if (leftButtonPressed && !rightButtonPressed) return imagesArray[0]
    if (leftButtonPressed && rightButtonPressed) return imagesArray[1]
    return imagesArray[3]
  })()
  
  return (
    <div className="App-background">
      <div className="App-container" style={{height: height, width: width}}>
        <div 
          className="main-console" 
          style={{
            height: height, 
            width: width,
            backgroundImage: `url("${currentBg}")`
          }}
        >
          <div style={{display: 'flex'}}>
            <div 
              className='leftSideButton' 
              style={{height: height, width: width/2, left: 0}} 
              onClick={() => switchImage(0)}
            />
            <div 
              className='rightSideButton' 
              style={{height: height, width: width/2, right: 0}} 
              onClick={() => switchImage(1)}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

• 移除了冗余的imageSelected状态：当前展示的背景图完全由两个按钮的按下状态决定，属于可从现有状态派生的值，不需要单独存状态，从根源上避免多个状态不一致的问题。
• 所有界面展示内容全部由状态驱动，没有手动操作DOM的逻辑，点击后状态更新一次就能触发正确的界面重渲染，不会出现点击滞后的问题。
• 修正了原有JSX的标签闭合、嵌套错误，保证DOM结构符合预期。

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