Установите интервал времени для получения данных в методах жизненного цикла React

Question

Я создаю приложение реагирования для отображения данных в rest-api. Для этого я использовал метод componentDidMount и успешно получил данные без каких-либо затруднений. Мой фрагмент кода показан ниже.

  componentDidMount() {
        fetch('http://localhost:5000/sensors')
          .then(res => res.json())
          .then(json => {
            this.setState({
              isLoaded: true,
              sensors: json,
            })
            console.log(this.state.sensors);
          });

  }

Мое требование - получать данные каждые 40 секунд и обновлять таблицу без обновления веб-страницы. Может ли кто-нибудь помочь мне разобраться в этом?

Answer 1

Насколько мне известно, я думаю, что невозможно обновить состояние без повторного рендеринга компонента (без изменения состояния), поскольку response использует неглубокий рендеринг, он в основном проверяет предыдущее и текущее состояние и повторно отображает, если они не совпадают, если вы спросите меня, чтобы сделать это без утечек памяти и кучи ошибок, вы могли бы

a) использовать отдельный компонент для цели выборки и отображения результатов (как вы сказали в таблице), чтобы только этот компонент повторно отображался (и использовал сокращение или contextAPI. в зависимости от того, что вы хотите), также вы можете использовать componentWillUnmount (который будет устаревшим), когда пользователь отображает другую страницу, чтобы очистить интервал. (или вы можете использовать хуки и просто вернуть функцию, которая очищает интервал)

 useEffect(()=>{
     const interval = setInterval(()=>{
         //fetch here
     },40000);
     return () => {
         cleanInterval(interval)
     }
 },[tableData /*this is supposed to be the state value of the data you fetch*/])

b) состояние мутации. ЭТО НЕ ХОРОШАЯ ИДЕЯ (это приведет к большему количеству ошибок и ошибок)

Answer 2

В соответствии с моими требованиями, поскольку мне нужно загружать данные таблицы с интервалом в 40 секунд, я могу использовать Javascript встроенный метод setInterval () внутри componentWillMount () метод. Как показано в вопросе, начальная загрузка данных сразу после render () может быть выполнена из componentDidMount () .

Ниже мой код для получения данных за 40 секунд. временные интервалы.

 componentWillMount(){
     setInterval(() => {
      fetch('http://localhost:5000/sensors')
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          sensors: json,
        })
        console.log(this.state.sensors);
      });
     }, 40000);
   }