React中的懒加载 - 组件未加载

Question

请问为什么我的惰性加载组件从未加载过？

我只看到屏幕上显示着“loading...”的信息，没有出现任何错误。

以下是我的代码：

import React, { Component, lazy, Suspense } from "react";
import "./App.css";
//const Mycomp = lazy(() => import("./components/myComp"));
const Mycomp = lazy(() => {
  let x = new Promise(
    () => {
      import("./components/myComp");
    },
    e => {
      console.log(e);
    }
  );
  return x;
});

class App extends Component {
  sayHi = () => {
    console.log("supa");
  };

  render() {
    return (
      <Suspense fallback={<div> loading...</div>}>
        <div className="App">
          <header className="App-header">
            <Mycomp />
            <input type="button" value="sayHi" onClick={this.sayHi} />
          </header>
        </div>
      </Suspense>
    );
  }
}

export default App;

这仅仅是为了学习目的...请友善一点...我对React并不是很熟悉...

以下是myComp.jsx的代码:

import React, { Component } from "react";

class Mycomp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Mycomp;

- psj01

---

你正在尝试导入的组件是否具有默认导出？ - Chaim Friedman

@ChaimFriedman 是的。我在那里添加了Mycomp组件的代码。 - psj01

你正在导入 myComp 组件，但是你的组件名称是 Mycomp。 - loQ

Answer 1

来自React文档。

React.lazy接受一个必须调用动态import()的函数。这个函数必须返回一个Promise，该Promise解析为一个包含React组件的默认导出模块。

现在很微妙，但我认为在你的情况下，你正在返回自己新创建的Promise，你已经将其分配给了x。然而，你没有指定这个Promise解析成什么。React需要你返回一个Promise，该Promise解析为具有默认导出的组件。

我认为你可以对你的代码进行一些小的改动来让它工作。

const Mycomp = lazy(() => {
   return import("./components/myComp");
});

动态导入已经返回一个Promise，该Promise会解析为具有默认导出的组件，因此我认为你将其包装在自己的Promise中并返回可能会使其失效。

以下是来自React文档的示例。

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

这里有一段例子代码，展示了如何添加超时时间。

const OtherComponent = React.lazy(() => {
  const x = new Promise((resolve) => {
    setTimeout(() => {
      return resolve(import("./Child"))
    }, 1500)
  })
  return x;
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
      </div>
    );
  }
}

- Chaim Friedman

---

是的，那会起作用...但基本上我想做的是添加一个setTimeout函数，这样我就可以在大约5秒后加载组件...这可能吗？ - psj01

我从未尝试过那个。我的猜测是，只要满足懒惰函数的要求，你可以做任何事情。话虽如此，我很想自己尝试一下。 - Chaim Friedman

是的，我只是在玩弄它...但我无法让它工作...也没有错误信息可供参考...所以...有点卡住了.. :( - psj01

现在启动一个示例项目来尝试。我可以在 CRA 中使用这个 api 吗？ - Chaim Friedman

是的，那就是我所做的。 - psj01