SetInterval 每次在 React Js 中显示默认状态值答案

【问题标题】：SetInterval Showing default State value every time in React JsSetInterval 每次在 React Js 中显示默认状态值
【发布时间】：2021-04-25 20:03:16
【问题描述】：

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

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

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

【问题讨论】：

标签： arrays reactjs setinterval react-state-management

【解决方案1】：

你可以这样做

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：