Question

我不确定我是否正确地提出这个问题。但这就是我正在尝试做的事情，当我在客户端时，我对csrf令牌进行异步请求并将其插入到头文件中。你如何在这个标题中插入这个值？我得到令牌的未定义值和我使用时的错误。

{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功能。至少你不能异步使用它并延迟渲染功能。

你应该做的是在渲染功能中有一个条件，直到会话不可用。

像这样。

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调用再次渲染时 - state将拥有该标记，它将呈现您希望正确呈现的内容。

如何在渲染之前将异步返回值插入到道具中？

1 个答案: