Reactjs 反应类型脚本：useState从不更新

我不明白为什么state.startSlide从未更新为1、2、3或4，它总是0

import React, { useState, useEffect } from "react";
import image1 from "../images/carousel/screen-1.png";
import image2 from "../images/carousel/screen-2.png";
import image3 from "../images/carousel/screen-3.png";
import image4 from "../images/carousel/screen-4.png";
import image5 from "../images/carousel/screen-5.png";

const Carousel: React.FC = () => {
  interface StateInterface {
    showImage: any;
    startSlide: number;
  }

  const [state, setState] = useState<StateInterface>({
    showImage: image1,
    startSlide: 0
  });

  useEffect(() => {
    const images = [image1, image2, image3, image4, image5];
    if (state.startSlide === 0) {
      setInterval(function() {
        let currentIndex = state.startSlide;
        console.log(state.startSlide) // <== always logs 0 
        console.log(currentIndex) // <== always logs 0 
        if (state.startSlide < 5) currentIndex++;
        else currentIndex = 1;
        console.log(state.startSlide) // <== always logs 0
        console.log(currentIndex) // <== always logs 1
        setState({
          showImage: images[currentIndex],
          startSlide: currentIndex,
        });
        console.log(state.startSlide) // <== always logs 0 
        console.log(currentIndex) // <== always logs 1
      }, 3000);
    }
  }, [state, setState]);

  return (
    <div className="carousel">
      <p>{state.startSlide}</p> // <== Shows 0 then shows 1 but never 2,3,4
      <img src={state.showImage}></img>
    </div>
  );
};

export { Carousel };

import React，{useState，useffect}来自“React”；
从“./images/carousel/screen-1.png”导入image1；
从“./images/carousel/screen-2.png”导入image2；
从“./images/carousel/screen-3.png”导入image3；
从“./images/carousel/screen-4.png”导入image4；
从“./images/carousel/screen-5.png”导入image5；
const Carousel:React.FC=（）=>{
接口状态接口{
showImage：任何；
startSlide：编号；
}
常量[状态，设置状态]=使用状态({
showImage:image1，
开始滑动：0
});
useffect（（）=>{
常量图像=[image1，image2，image3，image4，image5]；
如果（state.startSlide==0）{
setInterval（函数（）{
让currentIndex=state.startSlide；
console.log（state.startSlide）/我认为在这种情况下可以使用setInterval，下面是一小段代码，可以帮助您实现这一点

如果您需要更多帮助，请发表评论

希望它能解决你的问题

 useEffect(() => {
    const interval = setInterval(() => {
      yourOperations()
    }, 3000);

    return () => clearInterval(interval);
  });

代码的问题在于，您试图直接改变状态：
state.startSlide
。但是，永远不要直接改变状态，始终要调用set函数。直接改变状态可能会导致奇怪的错误和难以优化的组件。这是您应该做的：

import React, { useState, useEffect } from "react";
import image1 from "../images/carousel/screen-1.png";
import image2 from "../images/carousel/screen-2.png";
import image3 from "../images/carousel/screen-3.png";
import image4 from "../images/carousel/screen-4.png";
import image5 from "../images/carousel/screen-5.png";

const Carousel: React.FC = () => {
  const [showImage, setShowImage] = useState('')
  const [startSlide, setStartSlide] = useState(0)

  useEffect(() => {
    const images = [image1, image2, image3, image4, image5];
    if (startSlide === 0) {
      setInterval(function () {
        console.log(startSlide)
        if (startSlide < 5) {
          setStartSlide(startSlide => startSlide++)
        }
        else setStartSlide(1)
        setShowImage(images[startSlide])
        console.log(startSlide)
      }, 3000);
    }
  }, [startSlide]);

  return (
    <div className="carousel">
      <p>{startSlide}</p>
      <img src={showImage}></img>
    </div>
  );
};

export { Carousel };

import React，{useState，useffect}来自“React”；
从“./images/carousel/screen-1.png”导入image1；
从“./images/carousel/screen-2.png”导入image2；
从“./images/carousel/screen-3.png”导入image3；
从“./images/carousel/screen-4.png”导入image4；
从“./images/carousel/screen-5.png”导入image5；
const Carousel:React.FC=（）=>{
常量[showImage，setShowImage]=使用状态（“”）
常量[startSlide，setStartSlide]=useState（0）
useffect（（）=>{
常量图像=[image1，image2，image3，image4，image5]；
如果（开始滑动===0）{
setInterval（函数（）{
console.log（startSlide）
如果（开始滑动<5）{
setStartSlide（startSlide=>startSlide++）
}
幻灯片（1）
设置ShowImage（图像[开始滑动]）
console.log（startSlide）
}, 3000);
}
}，[startSlide]）；
返回(
{startSlide}

);
};
出口{Carousel}；
必须删除
if（state.startSlide==0）{}
并在
<4
时增加
startSlide

工作演示：


const{useState，useffect}=React；
常量图像=['image1'、'image2'、'image3'、'image4'、'image5']；
const Carousel:React.FC=（）=>{
常量[状态，设置状态]=使用状态({
showImage:'image1'，
开始滑动：0
});
useffect（（）=>{
const interval=setInterval（函数（）{
setState（{startSlide:prevStartSlide}）=>{
控制台日志（prevStartSlide）；
设currentIndex=prevStartSlide；
如果（currentIndex<4）currentIndex++；
else-currentIndex=0；
返回{showImage:images[currentIndex]，
startSlide:currentIndex}；
});
}, 3000);
return（）=>clearInterval（interval）；
}, []);
返回(
{state.startSlide}

{state.showImage}
);
};
ReactDOM.render（，document.getElementsByTagName（'body'）[0]）；

您是否尝试过将
让currentIndex=state.startSlide；
移出
setInterval
？似乎是一个全局变量，每次都需要从
setInterval
内部进行更新。此外，我不确定您是否需要在
Useffect
中收听
设置状态deps数组。在处理区间内的旧状态时，应该使用setState（（oldState）=>（{}））语法。请检查-。这是将setInterval与挂钩一起使用的好方法。