React实现4列响应式多列轮播点击跳转、计数更新及resize异常求助

1. 滚动计算与状态更新逻辑错误 #

• React 状态更新为异步批量执行，调用setClickCount后立刻读取clickCount拿到的是更新前的旧值，直接用旧值计算滚动距离必然出现偏差
• 代码中scrollTo未做局部声明，属于隐式全局变量，多次调用后值会出现混乱
• next方向的状态更新未使用函数式写法，快速连续点击时会出现状态更新丢失的问题
• 存在多处笔误：方法名scrollSlide调用时写成scrollSllides，滚动配置项behaviour为错误拼写（JS标准写法为behavior）

2. 窗口适配逻辑缺失 #

• 窗口尺寸调整后外层容器宽度会发生变化，但存储的clickCount是基于旧宽度计算的偏移次数，直接用旧计数乘以新宽度得到的滚动距离完全不符合预期，就会出现跳项、滚动距离过大的异常

修正后的完整代码如下，核心优化点：

• 滚动距离基于更新后的计数提前计算，不依赖异步状态返回结果
• 统一状态更新逻辑，增加边界校验避免越界滚动
• 监听窗口resize事件，尺寸变化后自动校准滚动位置
• 增加项目样式约束，保证4列布局稳定

import { useState, useRef, useEffect, useCallback } from 'react'

// 可根据实际业务调整items的类型定义
type ItemType = {
  title: string
  image: string
}

type CarouselProps = {
  items: ItemType[]
}

const FourColumnCarousel = ({ items }: CarouselProps) => {
  const [clickCount, setClickCount] = useState(0)
  const mainWrap = useRef<HTMLDivElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  // 每页固定显示4个，计算最大可翻页次数
  const maxPage = Math.ceil(items.length / 4) - 1

  const scrollSlide = useCallback((direction: 'next' | 'prev') => {
    const containerWidth = mainWrap.current?.clientWidth
    if (!containerWidth) return

    let newCount = clickCount
    if (direction === 'next') {
      newCount = Math.min(clickCount + 1, maxPage)
    } else {
      newCount = Math.max(clickCount - 1, 0)
    }

    // 直接用新的计数计算滚动距离，不依赖异步状态更新
    const scrollTo = newCount * containerWidth
    containerRef.current?.scrollTo({
      behavior: 'smooth',
      left: scrollTo
    })

    setClickCount(newCount)
  }, [clickCount, maxPage])

  // 监听窗口尺寸变化，自动校准滚动位置避免跳项
  useEffect(() => {
    const handleResize = () => {
      const containerWidth = mainWrap.current?.clientWidth
      if (!containerWidth) return
      containerRef.current?.scrollTo({
        left: clickCount * containerWidth
      })
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [clickCount])

  return (
    <div ref={mainWrap} style={{ width: '100%', overflow: 'hidden' }}>
      <button onClick={() => scrollSlide('prev')} disabled={clickCount === 0}>Prev</button>
      <button onClick={() => scrollSlide('next')} disabled={clickCount === maxPage}>Next</button>
      <div 
        ref={containerRef}
        style={{
          display: 'flex',
          overflowX: 'hidden'
        }}
      >
        {items?.map((item, index) => (
          <div 
            key={index}
            style={{
              width: '25%',
              flexShrink: 0,
              boxSizing: 'border-box',
              padding: '0 8px'
            }}
          >
            <ItemComponent
              title={item.title}
              image={item.image}
            />
          </div>
        ))}
      </div>
    </div>
  )
}

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