useEffect - 在 setInterval 中调用函数

Question

如何在 useEffect 的 setInterval 中调用函数

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

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

我希望每 1 秒调用一次我的 getTime 函数。 我得到以下错误

 Line 8:46:  Expected an assignment or function call and instead saw an expression  no-unused-expressions.

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

Answer 1

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

        const timeoutId = setInterval(getTime, 1000);

或者，如果除了getTime()之外还有其他命令要在 setInterval 函数中执行，则如下所示。

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

Answer 2

您的

() => {getTime}

引用getTime函数但不对其执行任何操作。 你不是在调用函数。 这就是 linter 警告你的。

为什么不将getTime函数单独传递给setInterval ，而没有不必要的匿名包装器？

const timeoutId = setInterval(getTime, 1000);

另请注意，由于您设置的是interval ，而不是超时，因此您应该使用clearInterval ，而不是clearTimeout 。

我可以在 setInterval 内更新状态吗

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