Как запустить Promise для функции, которая повторяется? - PullRequest
Новая
       67

Как запустить Promise для функции, которая повторяется?

0 голосов
/ 28 апреля 2020

У меня есть следующая функция внутри компонента Stencil, которая повторяется до тех пор, пока не будет построено меню.

Когда я оборачиваю функцию в Promise, в компоненте Stencil появляется ошибка: 

renderMenu(obj, type, mobile) {

    let thisNested = this;

    return new Promise(function () {

      function checkMobile() {
        if (mobile) {
          return 'harmoni-navigation--' + type + '' + ' ' + 'harmoni-navigation--mobile';
        } else {
          return 'harmoni-navigation--' + type + '';
        }
      }

      return <div class={checkMobile()}>
        <ul>
          {
            Object.values(obj).map((object) => {
              return <li
                class={object['harmoniChildren']

                  /** Check if menu has any children. */

                  ? 'harmoni-navigation__item--' + type + '' + ' ' + 'harmoni-navigation__item--has-child'
                  : 'harmoni-navigation__item--' + type + ''}>

                <a href={object['url']}>
                  {object['title']}
                </a>

                {object['harmoniChildren'] && !mobile &&
                thisNested.renderMenu(object['harmoniChildren'], 'child', false)}

                {object['harmoniChildren'] && mobile &&
                thisNested.renderMenu(object['harmoniChildren'], 'child', true)}
              </li>
            })}
        </ul>
      </div>
    })
  }

Указана ошибка c по трафарету JS: vNode, переданный как дочерний, имеет непредвиденный тип. Убедитесь, что он использует правильную функцию h (). Пустые объекты также могут быть причиной, ищите комментарии JSX, которые стали объектами.

Однако я думаю, что проблема лежит где-то в моем коде, так как я никогда раньше не использовал Promises.

Надеюсь, что кто-то может помочь!

Спасибо!

1 Ответ

0 голосов
/ 28 апреля 2020

Функция рендерера не может быть асинхронной по разным причинам, поэтому вы также не можете ожидать асин c функций / методов в вашем render методе. Трафарет позволяет вам устанавливать различные методы жизненного цикла вашего компонента (см. документы жизненного цикла компонента ), и все эти методы могут быть asyn c. Идея состоит в том, что вы используете метод типа componentWillLoad или componentDidLoad для асинхронной подготовки состояния вашего компонента.

В опубликованном вами коде вы определенно не используете API Promise должным образом, потому что Функция, которую вы передаете в new Promise(), получает два обратных вызова resolve и reject, из которых вы должны по крайней мере использовать первый (иначе ваше обещание никогда не будет выполнено). Есть много руководств по обещаниям, которые вы можете прочитать (для начала попробуйте https://www.promisejs.org).

Ничто в вашей функции renderMenu не требует асинхронного поведения c, поэтому я не полностью уверен, что вы пытаетесь достичь с этим обещанием в любом случае. Поскольку вы упомянули в комментариях, что хотите выполнить инициализацию библиотеки после рендеринга вашего компонента, я предлагаю вам попробовать метод componentDidLoad, который выполняется после рендеринга вашего компонента.

Кстати ошибка, с которой вы сталкиваетесь, действительно вызвана вашим кодом, потому что обещание - это не то, что Stencil умеет отображать.

...