如何设置一个在箭头函数中定义的外部变量的值（Axios, 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 将是不同的。我现在该怎么办？

更新一下。 修正了 我只是为每个用户创建了一个单独的组件。谢谢大家！我创建了一个React组件。

Answer 1

你需要使用状态，因为getUser async方法。

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>
    }
}

Answer 2

React不能异步渲染组件，在你的组件中，axios用于从服务器获取数据，这是异步执行的，所以你不能异步渲染你的组件，解决方案在这里。

1. 在你的redux中为用户数据创建一个变量。
2. 然后在redux(action)中执行axios。
3. 最后，将你的redux商店连接到你的组件并使用它。