如何在 React 应用程序中使用承诺的功能

Question

我正在尝试在 React 网络应用程序中实现 Bullet train API。根据他们的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>)
};

抛出这个：

解析错误：不能在异步函数之外使用关键字 'await'

如果我们添加 async 关键字，并带有适当的返回语句：

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

然后它抛出：

你的渲染方法应该有return语句

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

Answer 1

在挂载期间（在您希望之前/之后）在异步函数中调用函数 isFeatureEnabled

示例 -

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));
    });
}

...
componentDidMount() {
  this.checEnabled();
}
...
const checkEnabled = async () => {

const flag = await isFeatureEnabled('feature1');

this.setState({f1enabled: flag});

}
...
render() {
  return (<div>{this.state.f1enabled ? <p>feature1 is enabled</p> : null}</div>)
}

如果 isFeatureEnabled 在同一个文件中，则将其保留在类组件之外，否则将其保留在另一个文件中并导出函数。

Answer 2

我建议您不要在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。

Answer 3

你不能在那里使用promise，正确的方法：

import React, { useEffect, useState } from 'react'
import bulletTrain from '../somewhere'
import BULLET_TRAIN_ENV_ID from '../somewhere'

export default function featureComponent({ featureName }) {
  const [featureEnabled, setFeatureEnabled] = useState(false)

  useEffect(() => {
    bulletTrain.init({
      environmentID: BULLET_TRAIN_ENV_ID
    })

    bulletTrain
      .hasFeature(featureName)
      .then(featureFlag => {
        if (featureFlag[featureName].enabled) {
          setFeatureEnabled(true)
        }
      })
      .catch(err => setFeatureEnabled(false))
  }, [featureName])

  return <div>{featureEnabled && <p>{featureName} is enabled</p>}</div>
}

---

在下面追加isFeatureEnabled函数重用答案：

import React, { useEffect, useState } from 'react'
import isFeatureEnabled from '../somewhere'

export default function featureComponent({ featureName }) {
  const [featureEnabled, setFeatureEnabled] = useState(false)

  useEffect(() => {
    const checkAndSetEnabled = async () => {
      const enabled = await isFeatureEnabled(featureName)
      setFeatureEnabled(enabled)
    }
    checkAndSetEnabled()
  }, [featureName])

  return <div>{featureEnabled && <p>{featureName} is enabled</p>}</div>
}