javascript - 为什么反应进度条呈现整个百分比而不是逐渐增加它?
问题描述
我正在尝试根据页面加载时 setTimeout 的更改来更新百分比状态,因此填充器将填充progressiveBar 直到 100%
const { React, ReactDOM } = window
const { useEffect, useState, Fragment } = React
const { render } = ReactDOM
const rootNode = document.getElementById('app')
const ProgressiveBar = () => {
const [state, setState] = useState({
percentage : 10
});
if(state.percentage < 100 ) {
setTimeout(
setState(prevState => {
let { percentage } = prevState;
percentage = prevState + 1;
return {
percentage
}
}), 30
)
}
return (
<div >
<h4>progressive bar when......
</h4>
<div className="progressiveBar">
<div className="innerFiller" style={{width:`${ state.percentage }%`}}>
</div>
</div>
<div>
</div>
</div>
)
}
ReactDOM.render(<ProgressiveBar/>, rootNode)
解决方案
像这样的东西可能会起作用
const ProgressiveBar = () => {
const [percentage, setPercentage] = useState(10);
if (percentage < 100) {
setTimeout(() => setPercentage(percentage + 1), 30);
}
return (
<div>
<h4>progressive bar when......</h4>
<div className="progressiveBar">
<div className="innerFiller" style={{ width: `${percentage}%` }}>
{percentage}
</div>
</div>
<div />
</div>
);
};
推荐阅读
- javascript - JavaScript Discord Bot 没有响应
- wordpress - 有什么方法可以从 fb shop / catalogue 导出产品数据?
- reactjs - 如何在本机中动态导入图像?
- android - 如何为具有上下文、标题和消息的函数编写本地单元测试用例?
- python - 使用 Sqlalchemy 在多个外键上创建连接
- json - 如何从源代码中隐藏 Shopify 产品 #tags + #collections?这会影响#smartcollections 和/或#analytics #retargeting
- unity3d - Unity 在特定时刻启动音频
- .net-core - 验证没有公钥 (RSA) 的 JWT .net 核心 webapi
- android - 在 Android 中访问文件已更改
- python - Plotly Heatmap:如何使用 y 作为字符串?