Reactjs 我可以更新减速器挂钩内的外部状态吗？

我正在做一个带有进度倒计时条的滑块，每隔10秒滑块会显示下一幅图像。。基本上，问题是每次调度启动时，我需要将时间设置为10秒

目前保持相同的秒数，因此如果您等待3秒9,8,7，然后单击“下一步”，它将显示下一个图像，但时间从7开始，我需要设置调用reduces的时间

我的问题是，当调用减速机时，如何调用setCount

const initialState = {scene: 0};

function reducer(state, action) {

    switch (action.type) {
      case 'next':        
        //setCount()====> 'setCount' is not defined
        return {scene: state.scene + 1};
      case 'prev':
        return {scene: state.scene - 1};
      default:
        throw new Error();
    }
}


function App() {
    const limitSlider = 17
    const initialCount = 10
    const [state, dispatch] = useReducer(reducer, initialState);
    const [currentCount, setCount] = useState(initialCount);



    useEffect(
        () =>{
            const timer = () => setCount(currentCount - 1);

            if (currentCount <= 0) {

                //stop countdown 
                if ( state.scene === limitSlider) return

                //change to the next scene
                dispatch( {type: 'next'} )

                //set count
                setCount(10)
                return;
            }

            //reset interval
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
    },[currentCount, state.scene])


    return (
        <>



                scene: {state.scene} time: {currentCount}

                <button onClick={() => dispatch({type: 'prev' })} disabled={state.scene === 0}>-</button>
                <progress max="" value={`${currentCount}%`}> </progress> // progress is not working need to figure it out first the seconds
                <button onClick={() => dispatch({type: 'next'})} disabled={state.scene === limitSlider}>+</button>


        </>
  );
}

constinitialstate={scene:0}；
功能减速机（状态、动作）{
开关（动作类型）{
“下一个”案例：
//setCount（）==>“setCount”未定义
返回{scene:state.scene+1}；
案例“prev”：
返回{scene:state.scene-1}；
违约：
抛出新错误（）；
}
}
函数App（）{
常数限制滑块=17
常数initialCount=10
const[state，dispatch]=useReducer（reducer，initialState）；
const[currentCount，setCount]=使用状态（initialCount）；
使用效果(
() =>{
常量计时器=（）=>setCount（currentCount-1）；
if（当前计数清除间隔（id）；
}，[currentCount，state.scene]）
返回(
场景：{state.scene}时间：{currentCount}
分派（{type:'prev'}）已禁用={state.scene===0}>-
//进步是不起作用的，需要在第一秒就把它弄清楚
调度（{type:'next'}）已禁用={state.scene===limitSlider}>+
);
}

---

抱歉，我试图使用stackoverflow中的预构建代码段编译它，但出现了一些错误

我解决了这个问题，只是在onclick中使用了

setcount（）

，不知道这是一种方法还是在reducer之后有其他方法调用它

<button onClick={() => {
                    setCount(initialCount);
                    dispatch({type: 'prev' })
                }} disabled={state.scene === 0}>-</button>

                <progress max="1%" value={`${currentCount}%`}> </progress>

                <button onClick={() => {
                    setCount(initialCount);
                    dispatch({type: 'next'})}} disabled={state.scene === lastScene}>+</button>

{
setCount（initialCount）；
分派（{type:'prev'}）
}}禁用={state.scene===0}>-
{
setCount（initialCount）；
分派（{type:'next'}}}已禁用={state.scene===lastsecene}>+

您可以将所有状态放在一个减速器中：

const initialState = {
  scene: 0,
  count: 10
};

function reducer(state, action) {
  switch (action.type) {
    case "next":
      return { scene: state.scene + 1, count: 10 };
    case "prev":
      return { scene: state.scene - 1, count: 10 };
    case "inc":
      return { ...state, count: state.count + 1 };  
    case "dec":
      return { ...state, count: state.count - 1 };           
    default:
      throw new Error();
  }
}

---

这里的完整代码：

太棒了！！…没有想到这一点，比我的解决方案好得多..谢谢你知道我如何在每秒钟后停止渲染应用程序组件吗？-谢谢为什么？如果它没有渲染，那么你就不能更新计时器我的意思是只渲染一次而不是每秒钟渲染一次应用程序…我里面有20个组件应用程序，每一个都有自己的动画和音频…每秒钟渲染一次…有点混乱…理想情况下，我只需要听场景变量…当它改变时，我更改了内容，…我使用了回调和备忘录，但运气不好，我想因为时间在缩短，所以它只是渲染我刚刚创建的这个qu的所有内容估计