Как установить значение переменной, определенной снаружи в стрелочной функции (Ax ios, react, javascript)

Question

Я создал компонент React , который получает данные с сервера с помощью Axios и отображает их в элементе <p>.
Вот мой код:

import React from "react";
import Axios from "axios";

class Abc extends React.Component {
    getUser = () => {
        let r;
        Axios.get("...").then(res => {
            r = res.data();
        });
        return r
    }

    render() {
        return <p>User: {getUser()}</p>
    }
}

Но приведенный выше код возвращает user как undefined. Как я могу это исправить?

EDIT: Для тех из вас, кто просит меня использовать componentDidMount() и state, мне нужно использовать эту переменную user несколько раз, и все раз user будет другим. Что мне теперь делать?

ОБНОВЛЕНИЕ: Исправлено. Я просто создал отдельный компонент для каждого пользователя. Всем спасибо!

Answer 1

React не может отображать компонент асинхронно. В вашем компоненте ax ios используется для получения данных с сервера. Это выполняется асинхронно. Таким образом, вы не должны отображать свой компонент асинхронно. Решение здесь:

1. Создайте переменную в вашем redux для пользовательских данных.
2. Затем выполните ax ios в вашем redux (action)
3. Наконец, подключитесь ваш redux store для вашего компонента и используйте его.

Answer 2

Вам нужно использовать состояние, потому что getUser asyn c method

class Abc extends React.Component {
    state = {
        user: null,
    }

    componentDidMount() {
        Axios.get("...").then(res => {
            this.setState({ user: res.data() });
        });
    }

    render() {
        const { user } = this.state;

        if (!user) {
            return <p>Loading...</p>;
        }

        return <p>User: {user}</p>
    }
}