ReactJS：在特定时间间隔内定期更新状态

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);