每 20 秒刷新一次 react 组件答案

【问题标题】：Refresh the react component every 20 seconds每 20 秒刷新一次 react 组件
【发布时间】：2020-08-04 06:26:06
【问题描述】：

我在页面中有一个组件，我想通过每 30 秒刷新一次组件来获取页面的最新状态，

例如，此数据来自服务器，并且不断添加和删除 id 和名称。我们可以每30秒刷新一次组件Datatable，而不是每次手动刷新页面，以确保我们拥有最新的数据。

我该怎么做。 setInterval 是正确的方法还是 ShouldComponentUpdate 会成功？

编辑：只需要编辑表格而不是整个组件

export class DataTable extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.context.store.dispatch(getData());
    }

    componentDidMount(){
           this.updateTimer = setInterval(() => this.context.store.dispatch(getData()), 30000);
}

componentWillUnmount(){
    clearInterval(this.updateTimer);
}
    
    _getDtableProps() {
        const arr = this.props.getData.data;
        const data = arr.map((d, i) => {
            return {    
                'id': this.formatPathId(d['id']),
                'name': this.formatTime(d['name'])
            }
        })
        return {
            data,
            dtOptions: {
                order: [2, "desc"]
            },
            columns: [
                {
                    data: 'id',
                    title: 'Id',
                    searchable: true
                },
                {
                    data: 'name',
                    title: 'Name',
                    searchable: true
                }
            ]

        }
    }


    render() {
           let tableProps = this._getDtableProps();
            return (       
                <div className={style.container}>
                    <Table {...tableProps}/>
                </div>
                
            );
    }
}

【问题讨论】：

State and Lifecycle 文档中给出了这种情况的一个很好的例子。该示例实现了一个每秒更新的时钟。它使用componentDidMount 中的setInterval 来更新时间。在componentWillUnmount 中使用clearInterval 删除间隔。

标签： javascript reactjs

【解决方案1】：

是的，setInterval 是要走的路。 shouldComponentUpdate 不会按时被调用。

在经典的基于类的组件中，您需要在componentDidMount 中设置一个计时器，例如

this.updateTimer = setInterval(() => this.loadNewData(), 30000);

并在componentWillUnmount()删除它：

clearInterval(this.updateTimer);

【讨论】：

我已经编辑了代码，它仍然无法正常工作-请您提供建议。
刷新间隔不断增加。首先它刷新一次，然后组件刷新两次，依此类推
我说的是componentDidMount，而不是componentDidUpdate。
是否有机会更新表格内容而不是刷新整个组件？

【解决方案2】：

简单的解决方法是componentDidMount方法中的setInterval。

componentDidMount() {
   // any your code ....
   this.timer = setInterval(() => {
     // code to refresh your component.
   },30000)
}

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

【讨论】：

我已经编辑了代码，它仍然无法正常工作-请您提供建议。
刷新间隔不断增加。首先它刷新一次，然后组件刷新两次，依此类推

【解决方案3】：

Ciao，在这种情况下我使用这种模式：

  state = {
     ...
     delay: 30000,
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, this.state.delay);
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay !== this.state.delay) {
      clearInterval(this.interval);
      this.interval = setInterval(this.tick, this.state.delay);
    }
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick = () => {
    // load new data here
  }

我将delay 置于状态以修改setInterval 延迟，以防我想增加/减少间隔时间。

【讨论】：