如何使用 Typescript 在 React 中设置时间间隔

Question

我正在尝试在 react/typescript 中呈现动态进度条。我能够在反应中做到这一点，但将其转换为打字稿给了我；

[ts] 类型“Jockey”上不存在属性“setInterval”。 任何

在setInterval 内部调用componentDidMount 时带有警告下划线。

仅使用 react 我在 componentDidMount 中使用了 this.interval = setInterval(this.timer, this.state.interval); 并且它有效，但是使用 typescript 的严格输入，我不知道该怎么做。

Jockey.tsx

import * as React from 'react';

interface Props {
    color: string;
    avatar: string;
}

interface State {
    interval: number;
    progress: number;
}

export class Jockey extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {
          interval: Math.floor(Math.random() * 500),
          progress: 0,
        };
    }

    componentDidMount () {
        this.setInterval(this.timer, this.state.interval);
    }

    timer () {
        this.setState({ progress: this.state.progress + 1 });
        console.log('anyhting');
        
        (this.state.progress >= 99) ? this.setState({ progress: 100 }) : this.setState({ progress: 0 }) ;
    }

    render() {
        return (
            <div>
                <div className="App-lane">
                    {/* <img src={ this.props.avatar } alt=""/> */}
                    <progress value={this.state.progress} color={this.props.color} max="100" />
                </div>
            </div>
        );
    }
}

Answer 1

this.setInterval() 不存在。

我假设您正在尝试创建一个 interval 并保存一个 reference 以便您以后可以 clear 它。

请参阅下面的粗略示例，了解如何实现这一目标。

设置间隔

componentDidMount () {
  this.interval = setInterval(this.timer, this.state.interval)
}

清除间隔

componentWillUnmount() {
  clearInterval(this.interval)
}

进一步阅读

有关详细信息，请参阅 React Docs: State and Lifecycle 中的 setInterval() 参考资料。

一切顺利✌️