我有一个带有受控输入的组件.此组件也是Timer组件的父级.Timer组件使用setTimeout从20倒计时到0.现在,子组件在父组件中的每个击键(因此状态更改)时重新呈现.

const Timer = () => {
    const [secondsLeft, setSecondsLeft] = useState(20);

    if (secondsLeft) { 
        setTimeout(() => setSecondsLeft(secondsLeft - 1), 1000);   
    }

    const displayTime = '00:' + String(secondsLeft).padStart(2, '0');

    if (secondsLeft > 0) { 
        return <span>Time left {displayTime}</span>;   
    }
    
    return <span>You're out of time!</span>;
};

我的问题是,为什么倒计时计时器工作正常,无论我在父输入元素中输入多快,它的间隔总是精确到1秒.为什么重新呈现不会影响setTimeout?

推荐答案

如果你在一秒内更新5次,你现在有5个计时器会在那一秒调用setSecondsLeft(secondsLeft - 1).幸运的是,只有第一个调用触发了重现器,因为随后的调用不会更改该值.

try 使用:

setSecondsLeft(secondsLeft  => secondsLeft - 1)

注:Thomas在 comments 区提供答案.

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

如何防止使用useCallback和memo重新渲染

在Redux工具包查询中,是否可以将标记应用到API切片内的所有端点?

为什么我的React App.js只在页面刷新时呈现3次?

我应该如何管理设置组件初始状态的复杂逻辑?

在ReactJS的monaco编辑器中添加美人鱼语法

显示我是否加入聊天应用程序时出现问题

卸载 React 组件时未清除本地存储项目

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好?

如何在 Next Js 13 App Router 中添加 Favicon 图标?

使用 map 循环浏览列表列表中的列表并显示它们

我收到Uncaught TypeError: props.handleSelect is not a function

我正在通过 API(有效)从 MongoDB 传递数据.可视化但我不断收到此 TypeError: Cannot convert undefined or null to object

NextJS htaccess 设置

在复选框中react 检索选中的值

在 Spring Cloud Gateway 中运行的 React SPA 页面刷新出现白标错误

MUI 卡组件上的文本未正确对齐

交换键仍然引入了 fresh 的 DOM 元素

在 React 中使用使用状态挂钩合并两个数组

单击当前子div时如何更改p标签的图像和样式?react