Javascript 网页包导入代码拆分呈现<；未定义>；

我正在尝试进行基于组件的代码拆分。网页3

    loadDecisions = async () => {
    if (!this.TmplDecisions) {
      this.TmplDecisions = await import(
        /* webpackChunkName: "chunk-templates-decisions" */ 'src/components/decisions'
      );
    }

    return this.TmplDecisions;
  }

  renderDecisions () {
    if (this.TmplDecisions && this.TmplDecisions.default) {
      return <this.TmplDecisions.default 
        {...this.props} 
        logOpenEvent={this.logTagOpenEvent}
      />;
    } else return null;
  };

loadDecisions=async（）=>{
如果（！this.TmplDecisions）{
this.TmplDecisions=等待导入(
/*webpackChunkName：“区块模板决策”*/'src/components/decisions'
);
}
返回此.TmplDecisions；
}
renderDecisions（）{
if（this.TmplDecisions&&this.TmplDecisions.default）{
返回；
}否则返回null；
};

该组件在Dev tools调试器中显示良好，但呈现为

---

有人能帮忙吗

您的路径名应以

/

开头，以便动态导入相关模块

例如：

/*webpackChunkName:“chunk templates decisions”*/'./src/components/decisions.js'

（注意这里的

/

，否则webpack将

src

视为npm模块）

从React：

不能将常规表达式用作React元素类型。如果您确实希望使用通用表达式来指示元素的类型，只需首先将其指定给大写的变量即可

因此，首先尝试将类型分配给大写的变量

还将

TmplDecisions

添加到状态（或使用标记，例如

tmplDecisionsLoaded

），以便在加载

TmplDecisions

后重新渲染

  loadDecisions = async () => {
    if (!this.state.TmplDecisions) {
      const TmplDecisions = await import(
        /* webpackChunkName: "chunk-templates-decisions" */ 'src/components/decisions'
      );

      this.setState({ TmplDecisions });
      return TmplDecisions;
    } else {
      return this.state.TmplDecisions;
    } 
  }

  renderDecisions () {
    if (this.state.TmplDecisions && this.state.TmplDecisions.default) {
      const MyComponent = this.state.TmplDecisions.default;
      return <MyComponent
        {...this.props} 
        logOpenEvent={this.logTagOpenEvent}
      />;
    } else return null;
  };

loadDecisions=async（）=>{
if（！this.state.TmplDecisions）{
const TmplDecisions=等待导入(
/*webpackChunkName：“区块模板决策”*/'src/components/decisions'
);
this.setState（{TmplDecisions}）；
返回TMPL决策；
}否则{
返回this.state.TmplDecisions；
} 
}
renderDecisions（）{
if（this.state.TmplDecisions&&this.state.TmplDecisions.default）{
const MyComponent=this.state.TmplDecisions.default；
返回；
}否则返回null；
};

您确定一开始您没有返回承诺，而该承诺随后会传递给JSX吗？ 那会给你不明确的答案

componentDidMount（）{
const TmplDecisions=this.TmplDecisions&&this.TmplDecisions.default；
if（承诺的TMPLC实例）{
然后（（RealTmplDecisions）=>this.setState（{TmplDecisions:RealTmplDecisions}））；
返回；
}
if（TMPLF函数的实例）{
这是我的国家({
TMPL决策
});
返回；
}
}
//在shouldComponentUpdate上，您需要检查
//如果state.TmplDecisions！==未定义
//不管你在那里做什么
renderDecisions（）{
if（this.state.TmplDecisions）{
返回；
}否则返回null；
};

嗯，这里一切都很好。但可能的问题是，

renderDecisions

在何处以及如何使用？它是在一个单独的类中（类似于decisionLoader，还是您直接在另一个组件中使用它？我猜更新有问题。@MojtabaIzadmehr

renderDecisions

方法是从

render（）->renderLayout（）调用的

方法调用堆栈。

renderDecisions

返回一个

VNode

，这是我在开发工具中看到的。仍然没有得到发生的事情。我想问题是，您从未指出组件已成功导入，并且没有重新呈现组件（这可能是因为，您可以在devTools中看到它的值，但没有渲染，但是，如果组件仍然没有导入，您应该会遇到错误）。尝试一些简单的操作并检查它是否更改了任何内容。在

loadDecisions

中，在返回之前，使用

this.forceUpdate（）强制更新组件

。这可能是react中的一个错误，请也在那里报告。因为在任何情况下它都不应该返回。react调用函数组件，并在确定函数的类型后创建类实例。因此，如果组件本身不是组件，它应该返回一个错误。我注意到的一点是，不管是什么我为要导入的组件提供的路径，它总是导入块。即使路径错误。这就是事情开始变得混乱的地方。你提到的听起来不错。但它仍然不起作用。我仍然看到

检查你是否在

'src/components/decisions'中设置了
导出默认值…
，我在
'src/components/decisions'中设置了导出默认值你所说的是错误的，你实际上可以简单地使用一个类字段作为组件，工作很好，请检查：）你能创建最小复制吗？它应该能帮助我们更好地调试问题。