进度条在1秒增量的情况下不起作用

Question

我试图在react中创建一个简单的进度条，增量为1秒，但进度同时显示2%的增量。有人能告诉我这个代码出了什么问题，为什么它显示2%的增量而不是1%。

useEffect(() => {
const timer = setInterval(() => {
setProgress((prev) => {
if (prev < 100) {
return prev + 1;
}
if (prev === 100) {
clearInterval(timer);
}
return prev;
});
}, 1000);
}, []);

完整的代码在此代码沙盒中可用。https://codesandbox.io/s/progress-bar-in-react-ccty7w?file=/src/App.js

Answer 1

因为React的Strict Mode已启用，所以不具有依赖关系的useEffect实际上被调用了两次。这将导致创建两个计时器。

您可以将timer常量移到useEffect之外，并检查它是否已设置。要使其在进一步的重新渲染之间活动，可以在useRef中移动它。

请参见以下叉子：https://codesandbox.io/s/progress-bar-in-react-forked-ewdnuf

Answer 2

useEffect在React v18.0中运行两次。

这就是进度条从2开始的原因。

如果需要运行一次，可以在index.js文件中禁用严格模式，这是不推荐的。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode> // remove strict mode from here, not recommended
<App />
</React.StrictMode>
);

更多详情点击这里

在生产构建中，它将被解决，并且useEffect钩子将只被调用一次。