javascript - TypeScript + React.Lazy - Stack Overflow|江阴雨辰互联

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve(import('./Game')) , 1000)
}))

Error : Error:(6, 35) TS2345: Argument of type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to parameter of type '{ default: never; } | PromiseLike<{ default: never; }> | undefined'. Type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to type 'PromiseLike<{ default: never; }>'. Types of property 'then' are inpatible. Type '<TResult1 = typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game"), TResult2 = never>(onfulfilled?: ((value: typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reaso...' is not assignable to type '<TResult1 = { default: never; }, TResult2 = never>(onfulfilled?: ((value: { default: never; }) => TResult1 | PromiseLike) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'. Types of parameters 'onfulfilled' and 'onfulfilled' are inpatible. Types of parameters 'value' and 'value' are inpatible. Property 'default' is missing in type 'typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")' but required in type '{ default: never; }'.

What does he want from me?

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve(import('./Game')) , 1000)
}))

What does he want from me?

Share Improve this question asked Jun 26, 2020 at 12:33 Rudenya 271 silver badge5 bronze badges

Hi, please give us more information about what are you going to do? What efforts did you make and what is the problem are you facing? And, please, please, make the error log easy to read – RY_ Zheng Commented Jun 26, 2020 at 13:21
I want to make simulate delay. The code works fine on JS, I just want to typify it – Rudenya Commented Jun 26, 2020 at 15:21

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

lazy function returns a promise of { default: ... } object which being called asynchronously and will await till promise being not resolved that beind delayed for 1000 ms and in the end will import the Game ponent and return it.

    const Game = React.lazy(async () => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return import('./Game');
    });

Hope this helps!!

What does he want from me?

What do you want from him ?

React.lazy should be used like that:

const Game = React.lazy(() => import('./Game'));

You may have a more specific use-case (tell us) but the basic usage is like that.

I invite you to read the doc https://reactjs/docs/code-splitting.html#reactlazy

    const Game = React.lazy(() => import('./Game'))

You have try this

React.lazy wants a default export. If your './Game' doesn't export default, this won't work.

You could try this (where I'm guessing you're exporting a ponent called Game in the './Game' file). Otherwise, use a default export.

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve({default: import('./Game').Game}) , 1000)
}))

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745367878a4624666.html

javascript - TypeScript + React.Lazy - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - TypeScript + React.Lazy - Stack Overflow

4 Answers 4

相关推荐