时间戳

首页 > 解决方案 > setInterval 超时后调用父函数

javascript - setInterval 超时后调用父函数

问题描述

在我的反应应用程序中，我使用了一个计时器组件。我希望这个组件在后台运行并在一定时间后调用父函数。代码给出错误。我的代码是

父组件

import React, { Component } from 'react';
import Timer from './timer';


class Parent extends Component {

    finish(){
        console.log('fininsh')
    }

    render() {
        return (
            <div>
                <Timer data={this.finish.bind(this)} />
            </div>
        );
    }
}

export default Parent;

定时器组件

import React, { Component } from 'react';

class Timer extends Component {

    constructor(props){
        super(props);

        this.state = {
            fin: false
        }
    }

    componentDidMount(){
        this.myInterval = setInterval(() => {
            this.setState({fin: true})
        }, 10000);
    }

    childfinish = () => {
        this.props.data.finish
    }


    render() {

        const {fin} = this.state;

        if(fin){
            return(
            <div>
                {this.childfinish};
            </div>
            )
        } else {
        return (
              <div>
                  <h1>Counting...</h1>
              </div>
         )
        }
    }
}

export default Timer;

错误是

期望一个赋值或函数调用，而是看到一个表达式

标签： javascriptreactjstimer

解决方案

dataprop 不包含 function finish()。

{this.childfinish}从render()和删除

componentDidMount(){
   this.myInterval = setInterval(() => {
   this.setState({fin: true})
   this.props.data(); 
   }, 10000);
}

推荐阅读