ReactJS使用translateX变换切换滑动方向需点击两次的问题如何解决

你遇到的切换方向需要点击两次按钮才生效的问题，核心是React状态更新为异步批量执行：

• 调用setXPos更新位置后，当前作用域内的xPos变量不会立刻变为新值，要等到组件完成重渲染后，xPos才会更新为最新状态
• 你在setXPos后直接调用setStyle，此时读取的xPos还是更新前的旧值，导致style更新始终比实际位置慢一拍，第一次点击方向按钮时位移不会变化，第二次点击才能读到上一次更新的位置值。
  另外你这里存储style属于冗余状态，它的取值完全可以通过xPos直接计算得到，不需要单独维护状态，也避免了多状态同步的问题。

删除冗余的style状态，直接在绑定样式时通过xPos计算transform值，修改后的JS代码如下：

function App() {        
  const [xPos, setXPos ] = React.useState(0);
  
  const onClick =(direction) => {
    direction === "left" ? setXPos(x => x-100) : setXPos(x => x +100);
  }

  return (
    <div className="main_container">
      <button className="left_button" onClick={() => onClick("left")}>slide left</button>
      <div className="forecast_slider" >
        <div className="forecast_container" style={{transform: `translateX(${xPos}px)`}} > 
          {forecastBuilder()}
        </div>
      </div>
      <button className="right_button" onClick={() => onClick("right")}>slide right</button>
    </div>
  )
}

const forecastBuilder = () => {
  const cell = [];
  for(var i = 1 ; i < 8 ; i++){
    cell.push(
      <div className={i} key={i}>
        {i}
        <img src="https://imgs.michaels.com/MAM/assets/1/5E3C12034D34434F8A9BAAFDDF0F8E1B/img/0E9397ED92304202B4A25D7387A74515/M10118706_2.jpg" width="100" height="80" border="1px solid black" alt={`day ${i} icon`} />
        <br />
        <span>day {i}</span>
      </div>
    )
  }
  return cell;
}

ReactDOM.render(<App />, document.querySelector("#app"));

原有CSS和HTML代码无需改动即可正常运行，点击按钮会立刻触发对应方向的位移动画。

如果你确实需要单独维护style状态，可以通过useEffect监听xPos的变化，自动同步更新style，修改后的核心逻辑如下：

function App() {        
  const [xPos, setXPos ] = React.useState(0);
  const [style, setStyle] = React.useState({transform: `translateX(${xPos}px)`});

  // 监听xPos变化自动同步style
  useEffect(() => {
    setStyle({transform: `translateX(${xPos}px)`});
  }, [xPos])
  
  const onClick =(direction) => {
    direction === "left" ? setXPos(x => x-100) : setXPos(x => x +100);
  }

  // 剩余JS代码和原有逻辑一致
}

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