时间戳

首页 > 解决方案 > 如何在 React 组件中每分钟调用一个函数？

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

问题描述

我做了一个表格来获取股票报价，效果很好，但是当我尝试在组件中放置一个函数 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

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

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

生命周期方法是调用的方法，例如 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.
}, [])

推荐阅读