Reactjs 每 x 秒轮询 API 并做出react

发布于08月23日

我必须每一两秒钟监控屏幕上的一些数据更新信息.

    componentDidMount() {
        this.timer = setInterval(()=> this.getItems(), 1000);
      }
    
      componentWillUnmount() {
        this.timer = null;
      }
    
      getItems() {
        fetch(this.getEndpoint('api url endpoint"))
            .then(result => result.json())
            .then(result => this.setState({ items: result }));
      }

这是正确的方法吗？

推荐答案

好吧，因为你只有一个API，并且没有控制权来改变它以使用套接字，所以你唯一的方法就是轮询.

根据你的民意调查，你做得很好.但上面的代码中有一个trap .

componentDidMount() {
  this.timer = setInterval(()=> this.getItems(), 1000);
}

componentWillUnmount() {
  this.timer = null; // here...
}

getItems() {
  fetch(this.getEndpoint('api url endpoint"))
    .then(result => result.json())
    .then(result => this.setState({ items: result }));
}

这里的问题是，一旦组件卸载，尽管存储在this.timer中的对interval的引用被设置为null，但它还没有停止.即使在卸载组件后，间隔也会继续调用处理程序，并try 在不再存在的组件中调用.

要正确处理，先使用clearInterval(this.timer)，然后设置this.timer = null.

此外，fetch调用是异步的，这可能会导致相同的问题.设为cancelable，如果fetch不完整，则取消.

我希望这有帮助.