ReactJS: регулярно обновлять состояние в указанный c интервал времени

Question

Я создаю сенсорное приложение, в котором я должен регулярно обновлять состояние с интервалом в 15 секунд, получая данные из бэкэнда. Несмотря на то, что я могу успешно получить данные из бэкэнда за промежуток времени, я не могу обновить состояние в ReactJS. Код выглядит следующим образом:

async regularCallAPI(){
    let result;
    const url = "http://..../...";
    await fetch(url).then( res =>  res.json()).then( res => { result = res});
    console.log("Regular Data from Backend : ", result);
    let updatedSensors = result.map( sensor => {
        return {
            floorNum: sensor.floor_no,
            roomNum: sensor.room_no,
            sensorStatus: sensor.sensor_status,
            alertStatus: sensor.alert_status,
            ownerName: sensor.owner_name,
            email: sensor.email,
            phoneNumber: sensor.phone_number,
            recordedDateAndTime: new Date(sensor.created_date).toLocaleString()
        }
    });
    await this.setState({ sensors: updatedSensors });
    console.log("sensor state updated ...");
}

, и я выполнил указанную выше функцию с интервалом в 15 секунд;

timerId = setInterval(this.regularCallAPI, 15000);

У меня проблема в том, что она запускается в первый раз успешно и затем, когда он запускается во второй раз, я получаю эту ошибку:

Unhandled Rejection (TypeError): this.setState is not a function

и да, функция уже привязана к компоненту в конструкторе.
В чем причина такого поведения и какое возможное решение для этого?

Answer 1

Обратный вызов сделан в другом контексте. Вам необходимо привязать это, чтобы иметь доступ внутри обратного вызова:

setInterval( () => this.regularCallAPI(), 15000);