javascript - 在React Native中使用 Prop 启动计时器

我有一个<Timer/>组件，它能够在几个不同的状态（编辑，就绪和标记）之间转换，并且所有这些状态的UI都包含一个我创建的<CountDown/>组件。 <CountDown/>组件采用布尔属性edit，它确定是接受用户输入还是仅显示倒计时。

我遇到的问题是更改<CountDown/>是倒数还是仅显示静态数字。我的想法是使<CountDown/>组件也采用布尔属性ticking，这将激活/停用倒计时，但是目前看来，我的实现每次setInterval()都会启动一个新计时器（即调用<CountDown/>）。组件被重新渲染（每秒）。

因此，最大的问题是我应该如何设计我的<CountDown/>组件，使其按我的意愿开始递减计数？

（如果解决方案使用新的React生命周期方法而不是UNSAFE方法，将特别感激。）

我的<Timer/>的呈现函数如下所示（为简洁起见，省略了详细信息）：

render () {
        let countDown;

        if (this.state.currentState == TimerStates.TICKING) {
            countDown = (
                    <Countdown
                        countdownFromSeconds={this.state.countDownFrom}
                        ticking={true}
                        updateProgress={this.handleProgressUpdate}
                    />
            );
        } else if (this.state.currentState == TimerStates.EDITING) {
            countDown = (
                <Countdown
                    edit={true}
                    ticking={false}
                    onEdit={this.handleSelectedTimeUpdate}
                />
            );
        } else if (this.state.currentState == TimerStates.READY) {
            countDown = (
                <Countdown
                    edit={false}
                    ticking={false}
                    countdownFromSeconds={this.state.countDownFrom}
                />
            );
        }

        return (
            <View style={styles.container}>
                {countDown}
            </View>
        );
    }

<CountDown/>组件如下所示（省略了无关的详细信息）：

export default class Countdown extends Component {
    static propTypes = {
        countdownFromSeconds: Proptypes.number,
        edit: Proptypes.bool,
        ticking: Proptypes.bool,
    };

    constructor(props) {
        super(props);
        if (this.props.edit == true) {
            this.state = {
                totalTimeInSeconds: 0,
                ticking: false,
                seconds: 0,
                minutes: 0,
                hours: 0
            };
        } else if (this.props.ticking == true) {
            const startingTime = this.secondsToTimeComponents(props.countdownFromSeconds);
            console.log("Constructor for ticking");
            this.state = {
                totalTimeInSeconds: props.countdownFromSeconds,
                ticking: true,
                seconds: startingTime.seconds,
                minutes: startingTime.minutes,
                hours: startingTime.hours
            };
            if (this.props.ticking == true) {
                this.timerStart();
            }
        }
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        console.log("Got new prop: " + nextProps.ticking + " currently ticking: " + this.state.ticking);
        if (nextProps.ticking == true && this.state.ticking == false) {
            this.timerStart();
            return {
                ticking: true
            };
        } else return null;
    }

    componentWillUnmount() {
        this.timerStop();
    }

    timerStart = () => {
        console.log("Started timer");
        const interval = setInterval(this.tick, 1000);
        this.setState({
            interval,
        });
    }

    timerStop = () => {
        clearInterval(this.state.interval);
    }

    timerDone = () => {
        console.log("Timer done!");
    }

    tick = () => {
        if (this.state.totalTimeInSeconds == 0) {
            this.timerStop();
            this.timerDone();
        } else {
            this.setState({
                totalTimeInSeconds: this.state.totalTimeInSeconds - 1
            });
        }
        this.setState(this.secondsToTimeComponents(this.state.totalTimeInSeconds));
    }

    render() {
        return (
            <View style={styles.container}>
                <TimeUnitDisplay unit="hours" value={this.state.hours} edit={this.props.edit} onChange={this.handleHoursChanged} />
                <Text style={styles.separator}>:</Text>
                <TimeUnitDisplay unit="minutes" value={this.state.minutes} edit={this.props.edit} onChange={this.handleMinutesChanged} />
                <Text style={styles.separator}>:</Text>
                <TimeUnitDisplay unit="seconds" value={this.state.seconds} edit={this.props.edit} onChange={this.handleSecondsChanged} />
            </View>
        );
    }
}

这是我得到的调试输出：

04-29 14:06:32.764 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:33.789 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:33.859 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:34.877 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:34.957 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:35.967 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:36.050 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:37.064 19850 20081 I ReactNativeJS: Timer done!
etc...

最佳答案

您在return { ticking: true }中的componentWillReceiveProps不执行任何操作，因为它不使用返回值（与getDerivedStateFromProps不同）。您需要显式调用setState({ ticking: true})。

当clearInterval为false时代替props.ticking并在其为true时启动一个新的interval，可以考虑仅使初始setInterval实例保持活动状态，而避免在props.ticking为false时更新计时器：

tick = () => {
  if (!props.ticking) return;
  // rest of the code
}

但是，行为可能会稍有不同，因为props.ticking更改为true时可能会立即执行滴答。

另外，应在setInterval中而不是componentDidMount中调用constructor。

关于javascript - 在React Native中使用 Prop 启动计时器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50086474/