如何在呈现前将异步返回值插入prop？

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将具有令牌，并将正确呈现您希望呈现的内容。