如何将 javascript function 放入基于 React Class 的组件中？

Question

I have a piece of javascript code which pings a server every second to see if it is responding properly. I want to put it inside a React Class based Component to ping a specific server address (from component state) and copy response data to the component state. I cannot work out where to put the function for it to work like I intend.

My piece of javascript code:

var ping = require('ping');    //https://www.npmjs.com/package/ping

function myLoop(c=1){
    setTimeout(function(){
        ping.promise.probe('www.google.com',{timeout:10})
            .then(function (res) {
                console.log(res);
            });
        c++;
        if(c){
            myLoop();
        }
    }, 1000);
}

myLoop(); 

My React Component Structure:

class MyComponent extends React.Component{
    
    state={webAddress:'www.google.com',isAlive:false};
    
    constructor(){
        super();
    }

    componentDidMount(){
    }

    componentDidUpdate(){
    }
    
    handleSomeButtonPush(){
    }

    handleSomeTextInput(){
    }
    
    myIntendedFunction(this.state.webAddress){
        ///{.........}
        ///{.........}
        ///{.........}

        this.setState({isAlive:response.isAlive)};
    }

    render(){
        return(
            <div>
                <Component1/>
                <Component2/>
            </div>
        );
    }
}

export default MyComponent;


  [1]: https://www.npmjs.com/package/ping

Answer 1

You could export default your myLoop function in order to be used into your function.

import ping from "../your/path/to/ping.js"

Or you could define that function inside the component, you should set an interval when your component mounts.

componentDidMount(){
   let intervalID = setInterval(this.ping,1000);
   this.setState({ intervalID: intervalID }) // You need to add a property to your state object
}

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

ping(this.state.webAddress){
   // You define the function here using that ping library
   // If you need to clear the interval here, you could use clearInterval(this.state.intervalD) here
}

Remember to bind the ping method into your constructor.