Stencil JS传递数组控制台正常显示但页面无法渲染如何解决？

开发者阿泽

2026-8-26

问题根因

map遍历生成的DOM无法渲染的核心原因是遍历回调函数没有返回需要渲染的JSX节点：

你写的箭头函数使用{}包裹函数体，函数内部的<div>JSX结构只是孤立的语句，没有通过return返回，最终map生成的数组全是undefined，Stencil无法识别渲染对应DOM
控制台能正常打印name是因为console.log语句在函数体内正常执行，和JSX返回逻辑无关
数组长度可以正常渲染是因为这部分逻辑直接读取_arraydata.length，不依赖map的返回结果

修复方法

两种改法任选即可：

利用箭头函数隐式返回特性：去掉回调的大括号，用小括号包裹要渲染的JSX，JSX会自动作为回调返回值
保留大括号函数体的话，在JSX结构前加return关键字显式返回节点

修正后代码（无调试日志版本）

render() {
  return (
    <Host>
      <div>{this._arraydata.length}</div>
      {this._arraydata.map((x) => (
        <div key={x.value}>
          <h1>{x.name}</h1>
        </div>
      ))}
    </Host>
  );
}

修正后代码（保留console调试版本）

render() {
  return (
    <Host>
      <div>{this._arraydata.length}</div>
      {this._arraydata.map((x) => {
        console.log(x.name);
        return (
          <div key={x.value}>
            <h1>{x.name}</h1>
          </div>
        );
      })}
    </Host>
  );
}