Question

在我的应用程序中，令牌用于通过函数检索用户数据。就是这样：

export function getUserInfos(token) {
    if (token == "") {
        window.location = "/";
    }
    axios.get(
        url,
        {
            headers: {
                "Authorization": "Bearer " + token
            }
        }
    ).then((result) => {
        var surname = result.data.userInfos.surname;
        var name = result.data.userInfos.name;
        var userInfos = {
            surname: surname,
            name: name
        }
        document.title = "Profil - " + surname + " " + name;
        console.log(userInfos)
        return userInfos;
    }).catch((err) => {
    })
}

调用该函数时，

console.log(userInfos)可以正常工作，但是在我组件的侧面无法通过setState()获得此值。无论我做什么，我仍然会得到undefined。这是我组件中的代码：

class HomePage extends Component {
    static propTypes = {
        cookies: instanceOf(Cookies).isRequired
    };

    constructor(props) {
        super(props);

        const { cookies } = props;
        this.state = {
            token: cookies.get('token')
        }
    };
    componentDidMount() {
        this.setState((state, props) => {
            return {userInfos: getUserInfos(this.state.token)}
        }, () => {
            console.log(this.state.userInfos) // 'undefined'
        })
    }

    render() {
        console.log(this.state)
        return (
            <div>
                <h1>MyHomePage</h1>
            </div>
        )
    }
}

export default withCookies(HomePage);

我确定这是异步函数存在的问题，但是我无法围绕问题出在哪里或我做错了什么。我也检查过，这与导入函数getUserInfos无关。

Answer 1

您需要以另一种方式在componentDidMount内部使用api调用。仅在承诺解决后设置状态。

componentDidMount() {
    getUserInfos(this.state.token).then((userInfos) => {
      this.setState({userInfos: userInfos})
    })
}

反应setState返回未定义的功能

1 个答案: