Node.js 我的反应组件计时器不工作

Node.js 我的反应组件计时器不工作,node.js,reactjs,typescript,jsx,Node.js,Reactjs,Typescript,Jsx,我想使用Header组件作为时钟计时器。我希望我的页面渲染每一秒。我在谷歌搜索中遵循了一些例子。但是,找不到这样的例子。 为什么这个勾号函数不起作用? 控制台中没有错误 这是我的第一个代码: class index extends React.Component<Props, {}> { constructor({ title }: Props) { super({ title }); } render() { return ( <Layout

我想使用Header组件作为时钟计时器。我希望我的页面渲染每一秒。我在谷歌搜索中遵循了一些例子。但是,找不到这样的例子。 为什么这个勾号函数不起作用? 控制台中没有错误

这是我的第一个代码:

class index extends React.Component<Props, {}> {
constructor({ title }: Props) {
    super({ title });
}

render() {
    return (
        <Layout title={this.props.title}>
            <div className="header"><Header/></div>
            <div className="search-bar"><SearchBar/></div>
            <div className="Footer"><Footer/></div>
        </Layout>
    );
}
}

您正在执行服务器端渲染,而express react view就是这样做的,这意味着您的react组件的生命周期挂钩将不会被调用


因此,不会调用componentDidMount上的interval触发器。对原因有很好的解释。

console中有错误吗?请添加错误第二个代码中的状态类型是什么?对不起,控制台中没有错误。这是第二个代码中的状态类型。接口状态{date:string;}您能告诉我们如何使用您的第一个组件吗?当然!我不知道怎么了……哦,我明白了。
class Header extends React.Component<{}, States>{
intervalID: any;
constructor() {
    super({}, {});
    this.state = {
        date: new Date().toLocaleString(),
    } 
    this.tick = this.tick.bind(this);
}

componentDidMount() {
    this.intervalID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
    clearInterval(this.intervalID);
}

tick() {
    this.setState({
        date: new Date().toLocaleString(),
    })
}

render() {
    return (
        <header>
            <p>Header: {this.state.date}</p>
        </header>
    );
}
}

export default Header;
import { Request, Response }  from "express";

/**
* Get /
* Home page.
* @param req 
* @param res 
*/
export let index = (req: Request, res: Response) => {
   res.render("index", {"title": "React, Front-end"})
};