React轮播开发中useState更新数组不生效问题求助

问题根因 #

• setFirst/setSecond/setThird属于React异步状态更新接口，调用后不会立刻修改当前作用域下的对应变量值，后续计算索引时拿到的还是更新前的旧值，导致构造的新数组索引不符合预期
• 原注释代码中在forEach循环内重复调用setSlideArr，React会合并多次状态更新请求，再加上函数闭包捕获的旧状态值问题，最终只会生效最后一次更新，甚至完全不生效
• 直接调用splice修改slideArr本身属于状态突变操作，不符合React不可变数据的规范，虽然这次看起来页面更新了，但属于预期外的异常表现，后续很容易出现渲染不同步的问题
• 冗余维护了多个重复状态，slideArr完全可以通过slideNum直接从SlideData映射得到，额外维护单独的slideArr状态反而容易出现两个数组数据不同步的问题

优化后的实现方案 #

直接去掉冗余的slideArr状态和三个单独的索引状态，代码逻辑可以大幅简化：

const SecondGrid = () => {
  const total = SlideData.length;
  // 只需要维护当前显示的三个索引即可
  const [slideNum, setSlideNum] = useState([0,1,2]);

  const next = () => {
    setSlideNum(prev => {
      // 基于上一次的索引计算下一轮的三个索引，超出总长度自动绕回开头
      return prev.map(idx => (idx + 1) % total);
    })
  }

  useEffect(() => {
    // 轮播场景用setInterval更合适，3秒切换一次
    const timer = setInterval(next, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <Container>
      <div className="row">
        <div className="d-flex flex-wrap justify-content-around ">
          {/* 直接通过索引从SlideData取对应数据渲染，不需要额外维护slideArr */}
          {slideNum.map(idx => (
            <SlideCard val={SlideData[idx]} key={SlideData[idx].id} />
          ))}
        </div>
      </div>
    </Container>
  );
};

其他注意事项 #

• 所有React状态更新都要遵循不可变原则，修改数组/对象类型的状态时，要先构造新的数组/对象实例再传给set方法，不要直接修改原状态
• 列表渲染一定要加key属性，且不要用索引当key，用数据本身的唯一id更稳妥
• 定时器要在副作用清理函数中销毁，避免组件卸载后继续执行报错

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