React.js: проблема в ожидании вложенной функции на верхнем уровне функционального компонента - PullRequest
0 голосов
/ 28 сентября 2019

Я добавил ключевое слово async перед родительским компонентом моего приложения, чтобы дождаться вложенного асинхронного метода, но это вызвало несколько ошибок в консоли браузера Chrome:

const AdminArea = async props => {
  <few elements removed...> 

  if ( process.env.NODE_ENV === 'development' &&
    process.env.REACT_APP_WP_USER &&
    process.env.REACT_APP_WP_PASSWORD
  ) {
    const authentication = new Authentication();
    const token = await authentication.validateJwtOrCreateAndSaveToCookie({
        username : process.env.REACT_APP_WP_USER
    , password : process.env.REACT_APP_WP_PASSWORD
    });
  }

  <continues...>


// chrome errors
adminArea.bundle.js:64647 Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in AdminArea
    at invariant (http://localhost:8080/shared/adminArea.bundle.js:64647:15)
    at throwOnInvalidObjectType (http://localhost:8080/shared/adminArea.bundle.js:76425:5)
    at reconcileChildFibers (http://localhost:8080/shared/adminArea.bundle.js:77199:7)
    at reconcileChildren (http://localhost:8080/shared/adminArea.bundle.js:78994:28)
    at mountIndeterminateComponent 

adminArea.bundle.js:64647 Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in AdminArea
    at invariant (http://localhost:8080/shared/adminArea.bundle.js:64647:15)
    at throwOnInvalidObjectType (http://localhost:8080/shared/adminArea.bundle.js:76425:5)
    at reconcileChildFibers (http://localhost:8080/shared/adminArea.bundle.js:77199:7)
    at reconcileChildren (http://localhost:8080/shared/adminArea.bundle.js:78994:28)
    at mountIndeterminateComponent (http://localhost:8080/shared/adminArea.bundle.js:79656:5)
    at beginWork (http://localhost:8080/shared/adminArea.bundle.js:80217:16)

Если функциональные компоненты React не могутбыть асинхронным, как должна быть вложенная асинхронная функция awaited?В моем отладчике я вижу, что назначенная ему переменная содержит ожидающее обещание, превышающее точку, в которой оно уже должно было быть разрешено.

...