Reactjs 在react中，我应该在哪里调用setintreval

我正在尝试每延迟5秒调用一次getSession（）。但在初始渲染中，我希望调用此函数并立即执行

componentDidMount() {
     this.getSession();
 }

 getSession() {
     var path = "Sharing.aspx/GetSessions";
     setInterval(() => {
         axios
             .post(path, { withCredentials: true })
             .then(response => {
                 let element = response.data.d;
                 this.setState({
                     sessions: element
                 });
             })
             .catch(error => {
                 this.setState({
                     Errors: error
                 });
                 console.error(error);
             });
     },5000
     );
 }

 render() {
     return (
         <div>
             {this.renderSessionDetails()}
         </div>
         );
 }

根据我下面的代码，在初始渲染本身中，它使用5秒的延迟来显示输出

我如何实现以下目标： 1.初始渲染应立即完成 2.每隔5秒也应调用getSession（）

目前的结果： 在初始渲染中显示需要5秒延迟

预期成果： 初始渲染应立即完成

componentDidMount() {
     this.getSession();
 }

 getSession() {
     var path = "Sharing.aspx/GetSessions";
     setInterval(() => {
         axios
             .post(path, { withCredentials: true })
             .then(response => {
                 let element = response.data.d;
                 this.setState({
                     sessions: element
                 });
             })
             .catch(error => {
                 this.setState({
                     Errors: error
                 });
                 console.error(error);
             });
     },5000
     );
 }

 render() {
     return (
         <div>
             {this.renderSessionDetails()}
         </div>
         );
 }

componentDidMount（）{
这个.getSession（）；
}
getSession（）{
var path=“Sharing.aspx/GetSessions”；
设置间隔（（）=>{
axios
.post（路径，{withCredentials:true}）
。然后（响应=>{
让元素=response.data.d；
这是我的国家({
会议：要素
});
})
.catch（错误=>{
这是我的国家({
错误：错误
});
控制台错误（error）；
});
},5000
);
}
render（）{
返回(
{this.renderSessionDetails（）}
);
}

预期成果： 初始渲染应立即完成。

---

每5秒调用一次getSessions（）。

我会这样做：

const INTERVAL = 6000;

class Component extends React.Component {
  componentDidMount() {
    this.getSession();
    this.intervalId = window.setInterval(() => this.getSession(), INTERVAL);
  }

  componentWillUnmount() {
    window.clearInterval(this.intervalId);
  }

  getSession() {
    var path = "Sharing.aspx/GetSessions";
    setInterval(() => {
      axios
        .post(path, { withCredentials: true })
        .then(response => {
          let element = response.data.d;
          this.setState({
            sessions: element
          });
        })
        .catch(error => {
          this.setState({
            Errors: error
          });
          console.error(error);
        });
    }, 5000);
  }

  render() {
    return <div>{this.renderSessionDetails()}</div>;
  }
}

const INTERVAL=6000；
类组件扩展了React.Component{
componentDidMount（）{
这个.getSession（）；
this.intervalId=window.setInterval（（）=>this.getSession（），INTERVAL）；
}
组件将卸载（）{
window.clearInterval（this.intervalId）；
}
getSession（）{
var path=“Sharing.aspx/GetSessions”；
设置间隔（（）=>{
axios
.post（路径，{withCredentials:true}）
。然后（响应=>{
让元素=response.data.d；
这是我的国家({
会议：要素
});
})
.catch（错误=>{
这是我的国家({
错误：错误
});
控制台错误（error）；
});
}, 5000);
}
render（）{
返回{this.renderSessionDetails（）}；
}
}

ComponentDidMount

将只被调用一次，此时，您将调用第一个

getSession

调用，并启动

间隔

需要注意的一件重要事情是在卸载组件时调用
window.clearInterval
。这是为了确保interval不会永远运行，最糟糕的是，在装载此组件几次后，多个
interval
并行运行

我希望这会有所帮助。
您可以着手重构代码，使其看起来像那样，以避免最初等待那5秒钟。重构主要是从计时器实现中提取获取逻辑。请注意，在
componentDidMount（）
中，我们首先立即调用
this.getSession（）
，这很好，因为我们消除了它的间隔。然后我们分派间隔时间

类组件扩展React.Component（）{
intervalId=null
componentDidMount（）{
这个.getSession（）
this.intervalId=setInterval（（）=>this.getSession（），5000）
}
组件将卸载（）{
如果（本条有效）{
clearInterval（this.intervalId）
}
}
getSession（）{
var path='Sharing.aspx/GetSessions'
axios
.post（路径，{withCredentials:true}）
。然后（响应=>{
让元素=response.data.d
这是我的国家({
会议：要素
})
})
.catch（错误=>{
这是我的国家({
错误：错误
})
控制台错误（错误）
})
}
render（）{
返回{this.renderSessionDetails（）}
}
}

我也会尽力确保我们不会在这里遇到比赛条件。但是，如果您确定您的请求不会超过5秒，那么应该可以。希望有帮助
 您可以在
构造函数中调用
this.getSession（）
，然后在
组件安装中调用
setInterval
！我现在试过了，但是没有手动刷新页面，这些值就不会更新。我的意思是。。初始呈现当没有其他用户连接到同一服务器时，它应该打印“没有可用的会话”，当其他用户登录到同一服务器时，该表在用户1上更新，并描述谁加入了..componentDidMount（）{setInterval（（）=>{this.getSession，5000}）；}构造函数（props）{super（props）；this.state={activeSessions:{}；this.getSession（）；}您能将这个.renderSessionDetails（）方法放在注释中还是有疑问？