时间戳

首页 > 解决方案 > 当我尝试检索它时，类组件中的状态变量未定义

javascript - 当我尝试检索它时，类组件中的状态变量未定义

问题描述

我有这个类组件：

    import React, { Component } from 'react';
import '../styles/App.css';
import { openDB } from 'idb';

class MensaInfo extends Component {

    constructor() {
        super();
        this.state = {
            id: 0,
        };
    }


    getMensaId = async () => {
        var db = await openDB('PWA_DATA', 2);
        var transaction = db.transaction(["user"], "readonly");
        var store = transaction.objectStore('user');
        var mensa = await store.get('lieblingsmensa');
        this.id = mensa['lieblingsmensa'];
        console.log(this.id)
        db.close()
    }

    fetchMensa = async () => {
        const data = await fetch(`https://openmensa.org/api/v2/canteens/${this.id}/`);
        const info = await data.json();
    }

    update = () => {
        this.getMensaId()
        this.fetchMensa()
    }

    componentDidMount = () => {
        window.addEventListener('load', this.update());
    }

    render() {
        return (
            <div className="dive">
                {this.id}
            </div>
        )
    }

}

export default MensaInfo;

我的 idb 中有一个 id，我尝试将其用于 api 调用，我可以从 idb 获取 id 并将其保存为状态变量，当我尝试在我的 api 调用函数中使用它时，它显示为未定义，甚至没有显示我设置的 0。getmensaid 中的控制台登录向我显示了正确的值，但我不能将它用于 api 在不同的组件中它以这种方式工作，但在这种情况下它不起作用。我究竟做错了什么？

标签： javascriptreactjscomponentsjsx

解决方案

如我所见，您永远不会调用 this.setState。

getMensaId = async () => {
    var db = await openDB('PWA_DATA', 2);
    var transaction = db.transaction(["user"], "readonly");
    var store = transaction.objectStore('user');
    var mensa = await store.get('lieblingsmensa');
    // I think the problem is here
    this.setState({id: mensa['lieblingsmensa']});
    //this.id = mensa['lieblingsmensa'];
    console.log(this.id)
    db.close()
}

推荐阅读