node.js - 如何在 React 应用程序中使用 promise 的功能

Question

我正在尝试实现 Bullet train API在 React Web 应用程序中。根据他们的node client documentation ，我设置了以下功能:

export const isFeatureEnabled = async (nameOfTheFeature) => {
    return new Promise((resolve) => {

        bulletTrain.init({
            environmentID: BULLET_TRAIN_ENV_ID
        });

        bulletTrain.hasFeature(nameOfTheFeature)
            .then((featureFlag) => {
                if (featureFlag[nameOfTheFeature].enabled) {
                    resolve(true);
                }
            })
            .catch(err => resolve(false));
    });
}

这在常规组件中被调用，如下所示:

render() {
  return (<div>{await isFeatureEnabled('feature1') && <p>feature1 is enabled</p>}</div>)
};

抛出这个:

Parsing error: Can not use keyword 'await' outside an async function

如果我们添加 async 关键字，并使用正确的 return 语句:

async render() {
  return (<div>{await isFeatureEnabled('feature1') && <p>feature1 is enabled</p>}</div>)
};

然后它抛出:

Your render method should have return statement

那么在 React 应用程序中使用这个 promise 功能的正确方法是什么？

Answer 1

我建议您不要在 render 中使用 await 关键字，而是使用 componentDidMount 和 constructor 来实现此目的使用状态对象来检查:

constructor(props){
    super(props);
    this.state = { isFeatEnabled: false };
}

componentDidMount(){
    this.setState({isFeatEnabled:isFeatureEnabled('feature1')})
}

现在在渲染中:

render() {
  return (<div>{this.state.isFeatEnabled && <p>feature1 is enabled</p>}</div>)
};

并从方法中删除async。