Question

如何在useEffect的setInterval中调用函数

document.getElementById('head_svg').addEventListener('click', (() => { // using an IIFE to avoid needing global map variable
    var map;
    // the function returned here is the actual click handler
    return () => {
        if (map) {
            map.remove();
            map = null; // not really needed
        }
        // take users input
        var IP = document.getElementById('head_input').value;

        // pull from api
        let response = axios.get(`https://geo.ipify.org/api/v1?apiKey=at_H3DsmnX2FUOCxVpVMeoLQsbgJE4OR&ipAddress=${IP}`).then((response) => {

            // ... snip ... code removed for clarity
    
            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' + ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
                osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
            // no var here, it uses the var map above
            map = new L.Map('mapid', { zoomControl: false });
            map.setView(new L.LatLng(lat,long), 9 );
            
            // ... snip ... code removed for clarity
            
            // clearing input
            document.getElementById('head_input').value = "";            
        });
    };
})());

我希望每1秒钟调用一次getTime函数。我遇到错误了

useEffect(() => {
        const timeoutId = setInterval(() => {getTime}, 1000); // this is Line 8
        return function cleanup() {
          clearTimeout(timeoutId);
        }
      }, [getTime]);

const getTime=() =>{
            console.log("Inside getTime");}

另一个问题，我想每1秒更新一次状态，我可以在setInterval内更新状态

Answer 1

如果getTime()是setInterval的唯一函数，则可以这样做

        const timeoutId = setInterval(getTime, 1000);

如果在getTime()之外还有其他命令可以在setInterval函数中执行，则如下所述。

        const timeoutId = setInterval(() => {getTime()}, 1000);

Answer 2

您的

() => {getTime}

引用getTime函数，但不执行任何操作。您没有在调用该函数。这就是短毛绒警告您的内容。

为什么在没有不必要的匿名包装的情况下，不将getTime函数单独传递到setInterval中？

const timeoutId = setInterval(getTime, 1000);

还请注意，由于您要设置时间间隔而不是超时，因此应使用clearInterval，而不是clearTimeout。

我可以在setInterval中更新状态

当然可以，但是请记住，如果您要在流程中引用其他状态变量，则它们可能不是时间间隔结束时的最新状态。如果这是一个问题，则也可以使用refs，或者在状态变量更改时清除并重新启动超时。

useEffect-在setInterval内部调用一个函数

2 个答案: