如何在 React 组件中每分钟调用一个函数？

Posted 2023-02-22

【中文标题】如何在 React 组件中每分钟调用一个函数？

【英文标题】：How to call a function every minute in a React component?

【发布时间】：2021-03-10 23:20:49

【问题描述】：

我做了一个表格来获取股票报价，效果很好，但是当我尝试在组件中放置一个函数 include setState 时，它​​陷入了无限循环，它会触发 setState 并立即重新渲染并再次触发。

如何在加载此组件时调用此函数而不触发无限循环？ 我会每 10 秒或每分钟调用一次该函数。

import React,  useState  from 'react'
import api from '../../api'

function CreateRow(props)
    
    const [stock, setStock] = useState(symbol:'',last:'',change:'')
    

    async function check() 
        const result = await api.getStock(props.item)
        console.log(props.item)
        const symbol = result.data.symbol
        const lastest = result.data.latestPrice
        const change = result.data.change
        setStock(symbol:symbol, lastest:lastest, change:change)
    


    // check()   <----------! if I call the function here, it becomes an infinite loop.


    return(
        <tr>
            <th scope="row"></th>
            <td>stock.symbol</td>
            <td>stock.lastest</td>
            <td>stock.change</td>
        </tr>
    )


export default CreateRow

【问题讨论】：

尝试在其中使用useEffect和setTimeout。

【参考方案1】：

您想在生命周期方法中启动超时功能。

生命周期方法是调用的方法，例如 mount 和 unmount（还有更多示例，但为了说明起见，我将在这里停止）

您感兴趣的是挂载生命周期。

在功能组件中，可以这样访问：

const  useEffect  from 'react';

useEffect(() => 
  // This will fire only on mount.
, [])

在该函数中，您要初始化一个setTimeout 函数。

const MINUTE_MS = 60000;

useEffect(() => 
  const interval = setInterval(() => 
    console.log('Logs every minute');
  , MINUTE_MS);

  return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.
, [])

【讨论】：

答案对我来说看起来很棒，在一个小小的注释上我会声明 const MINUTE_MS = 60000;在 useEffect 之外，所以我们不必在每次迭代时重新声明变量

@PedroFerrari 绝对同意，我会更进一步，将其保存在constants.js 文件中以获得更好的一致性。我将编辑我的代码，谢谢！

这个答案应该被标记为接受的答案。

为什么clearInterval(interval) 很重要？那不会取消你设置的时间间隔吗？

【参考方案2】：

考虑 60000 毫秒 = 1 分钟

可以使用的方法：

setInterval(FunctionName, 60000)

如下：

async function check() 
  const result = await api.getStock(props.item)
  console.log(props.item)
  const symbol = result.data.symbol
  const lastest = result.data.latestPrice
  const change = result.data.change
  setStock(symbol:symbol, lastest:lastest, change:change)


// Write this line

useEffect(() => 
  check()
 , []);


setInterval(check, 60000);