为什么我的 setInterval 在反应钩子中只运行一次？答案

【问题标题】：Why does my setInterval run only once in react hooks?为什么我的 setInterval 在反应钩子中只运行一次？
【发布时间】：2020-06-15 06:51:49
【问题描述】：

为什么这段代码只触发了一次setInterval然后就停止了...

const MainBar = ()=> {

  const [clock, setClock] = useState("")

  useEffect(() => {
    const interval = setInterval(setClock(clockUpdate()), 1000);
    console.log('Im in useEffect', clock)
  });

...

而将它传递给另一个函数使其每秒都像这样工作？

const MainBar = ()=> {

  const [clock, setClock] = useState("")

  useEffect(() => {
    const interval = setInterval(()=>{setClock(clockUpdate())}, 1000);
    console.log('Im in useEffect', clock)
  });

...

抱歉，我是 hooks 和 javascript 的新手。

【问题讨论】：

标签： reactjs react-hooks setinterval

【解决方案1】：

setInterval 需要传递一个函数才能执行。在这种情况下，它将每秒执行给定的函数。 () => { setClock(clockUpdate()) } 实际上是一个匿名函数；一个没有名字的函数。如果你给它一个合适的名字，它看起来像function updater() { setClock(clockUpdate()); }。

setInterval(setClock(clockUpdate()), 1000) 不起作用，因为 setClock(clockUpdate()) 已经执行，甚至在它传递给 setInterval 之前。它不能安排它再次运行，因为它不是一个函数，它已经是一个结果。

【讨论】：

谢谢，但是 >setClock(clockUpdate()) 已经执行了我仍然没有得到大局，或者完全理解这个概念，你建议我应该做些什么进一步的阅读来完全理解如何javascript 有效，请指点我某处或指导我学习 javascript 的一般方法应该是什么。
我没有现成的好的参考资料，因为我自己学习了很长时间的javascript。我可以推荐的是，尝试一次学习不同的东西。在setInterval()的具体情况下，先尝试看看它在没有反应的情况下做了什么。在函数的特定情况下，首先尝试使用命名函数 (function abc() { })，然后移动到 function() { ... }，稍后再移动到 () => { }。最后，将所有内容组合到一个应用程序中。 javascript 生态系统并不容易，真的不是 :)

【解决方案2】：

您可以通过在useEffect 中添加第二个参数来尝试此操作，这意味着如果clock 更改，useEffect 将再次运行

useEffect(() => {
    const interval = setInterval(()=>{setClock(clockUpdate())}, 1000);
    console.log('Im in useEffect', clock)
  }, [clock]);

【讨论】：