Как использовать обещанную функцию в приложении реакции - PullRequest
Новая
       5

Как использовать обещанную функцию в приложении реакции

1 голос
/ 28 февраля 2020

Я пытаюсь реализовать API Bullet Train в веб-приложении React. В соответствии с клиентской документацией узла , я настроил следующую функцию: 

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' вне функции asyn c

Если мы добавим ключевое слово asyn c с правильным возвратом оператор: 

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

Затем он выдает:

Ваш метод рендеринга должен иметь оператор возврата

Так, как правильно использовать это обещанное функция внутри приложения реакции?

Ответы [ 3 ]

1 голос
/ 28 февраля 2020

Я бы посоветовал вам не использовать ключевое слово await в render, вместо этого используйте 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 из метода.

1 голос
/ 28 февраля 2020

Вы не можете использовать обещание там, надлежащим образом: 

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>
}
1 голос
/ 28 февраля 2020

вызов функции isFeatureEnabled внутри асинхронной функции c во время монтирования (до / после вашего wi sh)

пример - 


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 находится в тот же файл хранит его вне компонента класса, либо хранит его в другом файле и экспортирует функцию.

...