jd-opensource / jd-opensource/taro-ui

countDown组件重置不生效问题,componentWillReceiveProps接收参数后,执行clearTimeout,并没有清掉this.timer的值,所以setTimer的时候就走不进去了

Open
#1,524 4 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.