javascript - Reactjs检查数据更新

Question

我的项目中有 GUser 类，用于存储来自 GitHub-api 的数据并处理它们:

import axios from "axios";
export default class GUser {
    constructor(userName) {
        this.userName=userName;
        this.getUserData(this,userName);
    }
    getUserData(that, userName) {
        if(that.data===undefined)
        {
            axios.get('https://api.github.com/users/'.concat(userName))
                .then(function (response) {
                    that.data = response.data;
                    console.log(that);
                    return that.data;
                })
                .catch(function (error) {
                    console.log(userName+ " got error " +error);
                });
        }
        else{return that.data;}
    }
}

我正在尝试同步页面，因此在我的 TestRender 中我写道:

import React from 'react';
import GUser from "../model/GUser";
class TestRender extends React.Component{
    userName='maifeeulasad';
    user=new GUser(this.userName);
    componentWillMount() {
        try {
            console.log(this.user.getUserData());
        }
        catch (e) {console.log(e);}
    }
    componentDidMount() {
        try {
            console.log(this.user.getUserData());
        }
        catch (e) {console.log(e);}
    }
    render() {
        return(
            <div>
            </div>
        );
    }
}
export default TestRender;

我的目标是在收到数据后立即控制台记录数据。

我该怎么做？

以前，当我从同一脚本加载数据时，我仅使用 componentWillMount。它目前给我 TypeError: Cannot read property 'data' of undefined，可能是因为我没有在 中将 data 指定为 state >GUser，但它是随着时间的推移而创建的，对吧？

Answer 1

看起来你正在使用对象的属性来存储状态的组件，这不好，因为当这些值更新时，React 不会重新渲染组件。
TestRender< 的每个实例 应该具有相同的 userName 和 user 值作为属性吗？这些值总是相同的？如果没有，请使用useState为此。

另外，componentDidMount和componentWillMount只有在组件挂载时才会被调用，而此时你还没有完成fetch，所以你不用还没有打印的值(value)。这是一个异步问题。

为了处理异步挑战，我建议使用 useEffect .