Object promise ошибка

You’re not waiting for the value of result so you just get an unfulfilled promise. If you change

const result = this.getFieldsAPI();

to

const result = await this.getFieldsAPI();

You’ll get what you’re after. You’ll also need to make getFields() async.

answered Feb 26, 2019 at 17:52

Async functions would always return a Promise. Promises may be resolved or rejected. You can handle promises in the following ways:

1. Using then :

this.getFieldsAPI.then((value) => {
  // code on success
}, (errorReason) => {
  // code on error
});

1. Using await:

try { 
  const result = await this.getFieldsAPI();
} catch(errorReason) { 
  // code on error
}

You may choose on what fits you best. I personally prefer option 2, which seems less confusing.

answered Feb 26, 2019 at 17:58

To get a valid response you should adjust your code a bit, because currently you’re returning the string «result» and not the array from your promise.

In your getFieldsApi method you can do following:

...
Response = await Axios.get(API_URL + currentChromosome + this.state.currentKit);
return Response.data.map((locus) => locus);

And you would call it like:

const result = await this.getFieldsApi();

answered Feb 26, 2019 at 17:55

You’re not waiting for the value of result so you just get an unfulfilled promise. If you change

const result = this.getFieldsAPI();

to

const result = await this.getFieldsAPI();

You’ll get what you’re after. You’ll also need to make getFields() async.

answered Feb 26, 2019 at 17:52

Async functions would always return a Promise. Promises may be resolved or rejected. You can handle promises in the following ways:

1. Using then :

this.getFieldsAPI.then((value) => {
  // code on success
}, (errorReason) => {
  // code on error
});

1. Using await:

try { 
  const result = await this.getFieldsAPI();
} catch(errorReason) { 
  // code on error
}

You may choose on what fits you best. I personally prefer option 2, which seems less confusing.

answered Feb 26, 2019 at 17:58

To get a valid response you should adjust your code a bit, because currently you’re returning the string «result» and not the array from your promise.

In your getFieldsApi method you can do following:

...
Response = await Axios.get(API_URL + currentChromosome + this.state.currentKit);
return Response.data.map((locus) => locus);

And you would call it like:

const result = await this.getFieldsApi();

answered Feb 26, 2019 at 17:55

import React, { lazy, Suspense } from 'react'
import * as ReactDOM from 'react-dom'

const Foo = React.lazy(() => import('./foo/foo'))

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Foo />
      </Suspense>
    </div>
  )
}

@jcmoore0 thanks I think it clearly states the error.

Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.

const Foo = React.lazy( async () => (await import('./foo/foo').MyComponent )

or default as you wish.
I am closing this issue since it’s obvious. You can also try react-universal example

Actually, from the doc here

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

It must be a react component, not a function like in your case

@nchanged — Thanks so much for the quick reply.
I am still racking my brain to make this work.

https://reactjs.org/docs/code-splitting.html
didn’t use an aysnc/ await pattern

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

I was assuming lazy resolves the import promise to get the component from the default.

trying something like this:
const Foo = React.lazy( async () => (await import(‘./foo/foo’).default )

doesn’t work since import(‘./foo/foo’) is a promise and must be followed with .then

Maybe I am trying to hard

@jcmoore0 did you read my remark about React.Component You are exporting a function.

@nchanged — Yes, I saw your comment, thanks! I was confused as it worked in dev build but not in prod build.

Sharing what I found:

dev build
await import(«./foo/foo») yields {default: ()=>{}}

prod build
await import(«./foo/foo») yields {default: Promise(pending)}

In order to make it work in both dev and prod builds, I needed to return conditionally based on the type of the default which seemed inconsistent.

This works in both prod and dev builds:

const Foo = lazy(async () => {
  let obj = await import("./foo/foo")
  return typeof obj.default === 'function'?obj:obj.default
  }
)

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Foo />
      </Suspense>
    </div>
  )
}

Oh.. (( I was sure it works ) I will take a look

@jcmoore0 I haven’t forgotten about this issue, don’t you worry.

We are very closing to releasing a fuse compiler (basically an alternative to typescript which is 10x faster) Bear with us, it will solve all the issues.

It sound great!. Would you have any update?

@nchanged Any update on this one? Appear to be getting the same issue myself… really trying to keep us on fusebox (with a move from 3 to 4) instead of heading back to the world of webpack!

@jcmoore0 solution of wrapping each async import in additional logic before returning works (very nice dude), but man that’s an ugly solution… hoping to be able to ultimately use the standard «React» away, a la:

const MyAsyncComponent = React.lazy(() => import('./path-to-component'))

// and that's it...

This works in both prod and dev builds:

const Foo = lazy(async () => {
  let obj = await import("./foo/foo")
  return typeof obj.default === 'function'?obj:obj.default
  }
)

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Foo />
      </Suspense>
    </div>
  )
}

Unless this is addressed in the compiler, I have a generic workaround function in the meantime that mirrors the «React» way:

// util.js
import React from 'react'

export const lazy = (componentImportFn:Function) => React.lazy(async () => {
  let obj = await componentImportFn()
  return typeof obj.default === 'function' ? obj : obj.default
})

import React from 'react'
import { lazy } from './utils'

const MyAsyncComponent = lazy(() => import('./path-to-component'))

Certainly easier than creating wrapping functions for each

@kwhitley hey, the latest alpha build should have it fixed. We are using our own custom compiler for ts and js. But the production flow isn’t quite ready. We’re on it. 4.0.0-alpha.266

According to React documentation route-based-code-splitting:

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components.

So you should do the next steps, for not default modules

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

For me it helps.

You must export default the foo file component

@kwhitley hey, the latest alpha build should have it fixed. We are using our own custom compiler for ts and js. But the production flow isn’t quite ready. We’re on it. 4.0.0-alpha.266

in React TS file I am facing this issue.