每20秒刷新一次react组件

Question

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

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

我怎样才能做到这一点。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>
                
            );
    }
}

Answer 1

是的，setInterval这是要走的路。shouldComponentUpdate不会按计划接到电话。

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

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

并将其删除componentWillUnmount()：

clearInterval(this.updateTimer);