ReactJS 设置超时/设置间隔

Question

我正在尝试让以下内容每 30 秒重新加载一次。

componentDidMount() {
  fetch('https://example.com/json')
    .then((res) => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result.data,
        });
      },
      // Note: it's important to handle errors here
      // instead of a catch() block so that we don't swallow
      // exceptions from actual bugs in components.
      (error) => {
        this.setState({
          isLoaded: true,
          error,
        });
      },
    );
}

我曾尝试将其包装在 setInterval 中，但没有成功。我想知道如何将它变成一个函数，以便我可以根据需要重新加载它。

Answer 1

假设您想在进入组件后每 30 秒获取一次数据，然后在组件退出时停止此获取：

               componentDidMount() {
                this.myInterval = setInterval(() => {
                  fetch('https://example.com/json')
                    .then(res => res.json())
                    .then(
                    (result) => {
                        this.setState({
                        isLoaded: true,
                        items: result.data
                        });
                        
                    },
                    // Note: it's important to handle errors here
                    // instead of a catch() block so that we don't swallow
                    // exceptions from actual bugs in components.
                    (error) => {
                        this.setState({
                        isLoaded: true,
                        error
                        });
                    });
                 }, 30000);
               }

               componentWillUnmount() {    
                   clearInterval(this.myInterval);
               }

应该够了。

Answer 2

我建议您从 componentDidMount 方法中取出 fetch 函数。将它写在一个名为 loadData() 的函数或任何你想命名的函数中。然后在 loadData() 函数中用 like 包装你的获取逻辑正在关注。

const loadData = () => { 
setInterval(
async function(){
  //your fetch logic here with await
}, 30000);
}

componentDidMount() {
loadData()
}

ReactJS 设置超时/设置间隔

ReactJS SetTimeout / setInterval

settimeout

setinterval

reactjs

next.js