javascript - 如何在渲染之前将异步返回值插入到 prop 中？

Question

我不确定我问的问题是否正确。但这就是我想要做的，当我在客户端上时，我对 csrf token 发出异步请求并将其插入 header 中。如何像这样在 header 中插入该值？当我使用时，我得到了未定义的 token 值和错误。

{ this.state.session.csrfToken }

constructor(props) {
    super(props);
    this.state = {
        session: props.session,
    };
}

async componentDidMount() {
    const session = await getSession();
    this.setState({
        session: session
    });
}

render() {
    const props = {
        headers: {
            'X-CSRF-Token': { this.state.session.csrfToken }  <-- bad creates error
        }
    }

Answer 1

您无法将 componentDidMount 设为 async 函数。 至少你不能异步使用它并延迟渲染功能。

您应该做的是在渲染函数中设置一个条件，直到 session 不可用。

像这样。

render() {
    if (!this.state.session || !this.state.session.csrfToken) {
      return <div>waiting for token</div>;
    }

    const props = {
        headers: {
            'X-CSRF-Token': { this.state.session.csrfToken }
        }
    }

因此，当 setState 再次调用 render 时 - state 将拥有 token ，并且它将呈现您希望正确呈现的内容。