jd-opensource / jd-opensource/taro-ui
countDown组件重置不生效问题,componentWillReceiveProps接收参数后,执行clearTimeout,并没有清掉this.timer的值,所以setTimer的时候就走不进去了
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `taro-ui@3.1.0-beta.3` for the project I'm working on.
Here is the diff that solved my problem:
```diff
diff --git a/node_modules/taro-ui/dist/index.esm.js b/node_modules/taro-ui/dist/index.esm.js
index 2041192..f9adac1 100644
--- a/node_modules/taro-ui/dist/index.esm.js
+++ b/node_modules/taro-ui/dist/index.esm.js
@@ -5539,6 +5539,7 @@ var AtCountdown = /** @class */ (function (_super) {
AtCountdown.prototype.clearTimer = function () {
if (this.timer) {
clearTimeout(this.timer);
+ this.timer = null
}
};
AtCountdown.prototype.calculateTime = function () {
diff --git a/node_modules/taro-ui/lib/components/countdown/index.js b/node_modules/taro-ui/lib/components/countdown/index.js
index 3b56756..dabddff 100644
--- a/node_modules/taro-ui/lib/components/countdown/index.js
+++ b/node_modules/taro-ui/lib/components/countdown/index.js
@@ -9,6 +9,7 @@ export default class AtCountdown extends React.Component {
super(props);
const { day = 0, hours = 0, minutes = 0, seconds = 0 } = this.props;
this.seconds = toSeconds(day, hours, minutes, seconds);
+ console.log('AtCountdown======================constructor')
const { day: _day, hours: _hours, minutes: _minutes, seconds: _seconds } = this.calculateTime();
this.state = {
_day,
@@ -64,6 +65,8 @@ export default class AtCountdown extends React.Component {
}, 1000);
}
UNSAFE_componentWillReceiveProps(nextProps) {
+ debugger
+ console.log('AtCountdown======================constructor')
if (JSON.stringify(this.props) === JSON.stringify(nextProps))
return;
const { day, hours, minutes, seconds } = nextProps;
```
This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).
Contributor guide
Research direction
Start with lib/components/countdown/index.js and compare its clearTimer and UNSAFE_componentWillReceiveProps logic with the generated dist/index.esm.js shown in the report. Verify the countdown reset path and confirm that a reset can schedule the timer again without the existing timer state blocking it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100