Обновлять sh компонент реакции каждые 20 секунд

Question

У меня есть компонент на странице, на котором я хочу получить последнее состояние страницы, обновляя компонент каждые 30 секунд,

, например, эти данные поступают с сервера, а идентификатор и имена постоянно добавляются и удаляются. Вместо того, чтобы обновлять страницу вручную каждый раз, мы можем делать refre sh компонента Datatable каждые 30 se c, чтобы гарантировать, что у нас есть самые свежие данные.

Как я могу это сделать. Правильно ли 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 - это путь к go. shouldComponentUpdate не будет вызываться по расписанию.

В компоненте classi c на основе классов вы захотите установить таймер в componentDidMount, например

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

и удалите его на componentWillUnmount():

clearInterval(this.updateTimer);

Answer 2

Простое решение устанавливаетсяInterval в методе componentDidMount.

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

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

Answer 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 задержку в случае, если я хочу увеличить / уменьшить время интервала.