如何让react中的图表进行每五秒一次刷新

Question

router.post('/test',async(ctx)=>{
    function rnd(n, m){
        var random = Math.floor(Math.random()*(m-n+1)+n);
        return random;
    }
    let data = [];
    for(let i=0;i<10;i++){
      data.push(rnd(0,30))
    };
    ctx.body = {data}
})

以上是我后端的代码，随机生成一个数组。

componentWillMount() {
    // var myHeaders = new Header();
    // myHeaders.append("Content-Type", "application/json; charset=UTF-8");
    // myHeaders.append("Content-Length", context.length.toString());
    // myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

    var myInit = {
      method: 'POST',
    }; // 头部信息，解决兼容性问题
    var url = "http://localhost:3000/users/test"; // 接口url
    fetch(url,myInit).then(function(res) {
      if (res.ok) {
        return res.json()
      }else {
        {this.LogError(res)}
      }
    }).then(json=>{
      // this.state.option.series[0].data = json.data.slice();
      this.setState(this.state.option.series[0].data = json.data.slice());
      console.log(this.state.option.series[0].data);

    });
  }

我用react钩子获取后台数据，使用fetch把后台返回的数据加载到this.state.option.series[0].data中，现在我想实现组件每5秒刷新一次，求各位大佬帮帮忙。

也就是想实现一个，数据5秒更新一次的效果。

Answer 1

把fetch请求后台数据的方法封装成一个method，在react钩子里写一个定时器，每五秒执行一下前面封装的请求数据的函数，就这样去轮询。注意this的指向问题哟

componentWillMount() {
    // var myHeaders = new Header();
    // myHeaders.append("Content-Type", "application/json; charset=UTF-8");
    // myHeaders.append("Content-Length", context.length.toString());
    // myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

    var myInit = {
      method: 'POST',
    }; // 头部信息，解决兼容性问题
    var url = "http://localhost:3000/users/test"; // 接口url
    setInterval(()=>{
       fetch(url,myInit).then(function(res) {
          if (res.ok) {
            return res.json()
          }else {
            {this.LogError(res)}
          }
        }).then(json=>{
          // this.state.option.series[0].data = json.data.slice();
          this.setState(this.state.option.series[0].data = json.data.slice());
          console.log(this.state.option.series[0].data);
    
        });
    },5000)
  }

大概就是这样，这里比较简略，最好把fetch这个方法再抽一个函数出来

Answer 2

1 . 把componentWillMount 里面的代码抽取出来，封装成一个单独的方法。loadData()
2 . 在componentDidMount 里面设置一个定时器

this.intervalId = setInterval(() => {
    this.loadData();
}, 5000);

3 . 在componentWillUnMount 里面记得关闭这个定时器
clearInterval(this.intervalId);