使用 Stencil JS 传递数组，它不在屏幕上呈现，而是在控制台中显示

Question

    export class ArraySample {
          @Prop({ mutable: true }) arraydata: string;
          @State() _arraydata: { name: string; value: string }[] = [];
          @State() userInput: string
    
          componentWillLoad() {
            this.parseOptions();
          }
    
          @Watch("arraydata")
          parseOptions() {
            if (this.arraydata) {
            this._arraydata = JSON.parse(this.arraydata);
          }
      }

这是我面临问题的地方。我正在映射数组，但无法得到结果。

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

Answer 1

我尝试使用您的代码并传递一个数组来呈现组件。我做了一些细微的改变，它的工作原理。希望您能够找到代码中遗漏的内容，因为它看起来很简单。

import {
  Component,
  Prop,
  h,
  State,
  Watch,
  Host
} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Prop({
    mutable: true
  }) arraydata: string;

  @State() _arraydata: Array < {
    name: string;value: string
  } > = [];
  @State() userInput: string

  componentWillLoad() {
    this.parseOptions();
  }

  @Watch("arraydata")
  parseOptions(): Array < string > {
    if (this.arraydata) {
      this._arraydata = JSON.parse(this.arraydata);
    }
    return []
  }

  render() {
      return ( < Host > {
          this._arraydata.length
        } | {
          this._arraydata.map(item => item)
        } < /Host>)}
      }

<my-component arrayData="[1,2,3,4,5]"></my-component>