时间戳

首页 > 解决方案 > SetInterval 每次在 React Js 中显示默认状态值

arrays - SetInterval 每次在 React Js 中显示默认状态值

问题描述

每次我想将 CurrentIndex 运行到自定义持续时间或动态数组长度时，它都显示 0

    Const [currentIndex, setCurrentIndex] = useState(1);

    useEffect(() => {
    setInterval(() => {
      setCurrentIndex(5);
      if (currentIndex >= 5) {
        setCurrentIndex(0);
      }
      console.log('Current Index', currentIndex);
    }, 3000);
  }, []);

标签： arraysreactjssetintervalreact-state-management

解决方案

React 状态是异步的，因此更新需要一些时间延迟。所以使用单独 useEffect的钩子来监听索引

Const[currentIndex, setCurrentIndex] = useState(1);

useEffect(() => {
  if (currentIndex >= 5) {
    setCurrentIndex(0);
  }
  console.log('Current Index', currentIndex);
}, [currentIndex])

useEffect(() => {
  setInterval(() => {
    setCurrentIndex(5);
  }, 3000);
}, []);

推荐阅读