用 firstUpdated() 不能正确显示答案

【问题标题】：It is not displayed correctly with firstUpdated ()用 firstUpdated() 不能正确显示
【发布时间】：2021-07-29 07:20:58
【问题描述】：

我正在使用 vaadin 和 lit 实现一个复选框组件。我已经根据 vaadin 文档实现了它，但是我没有看到分组的复选框。

在控制台调试时，先调用“render()”，再调用“firstUpdated()”。所以我知道属性值将是一个空数组。

但是，即使我像示例一样实现它，我也不明白为什么会发生这种情况。如何正确实现？

vaadin document

这是自定义元素。

import { customElement, state } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-checkbox/vaadin-checkbox-group'
import '@vaadin/vaadin-checkbox/vaadin-checkbox'
import { CheckboxElement } from '@vaadin/vaadin-checkbox';
import { Person } from '../../util/person';
import { getPeople } from '../../util/personUtil';


@customElement('checkbox-indeterminate')
export class CheckboxIndeterminate extends LitElement {
  @state()
  private items: Person[] = [];

  @state()
  private selectedIds: string[] = [];

  async firstUpdated() {
    this.items = await getPeople();
    this.selectedIds = [String(this.items[0].id), String(this.items[2].id)];
    console.log(`firstUpdated: ${JSON.stringify(this.items)}`);
    console.log(`firstUpdated: ${JSON.stringify(this.selectedIds)}`);
  }

  render() {
    console.log(`render: ${JSON.stringify(this.items)}`);
    console.log(`render: ${JSON.stringify(this.selectedIds)}`);
    return html`
      <vaadin-vertical-layout theme="spacing">
        <vaadin-checkbox
          .checked="${this.selectedIds.length === this.items.length}"
          .indeterminate="${this.selectedIds.length > 0 && this.selectedIds.length < this.items.length}"
          @change="${(e: Event) =>
            (this.selectedIds = (e.target as CheckboxElement).checked
              ? this.items.map((person) => String(person.id))
              : [])}"
        >
          Notify users
        </vaadin-checkbox>

        <vaadin-checkbox-group
          label="Users to notify"
          theme="vertical"
          .value="${this.selectedIds}"
          @value-changed="${(e: CustomEvent) => (this.selectedIds = e.detail.value)}"
        >
          ${this.items.map((person) => {
            return html`
              <vaadin-checkbox .value="${String(person.id)}">
                ${person.firstName} ${person.lastName}
              </vaadin-checkbox>
            `;
          })}
        </vaadin-checkbox-group>
      </vaadin-vertical-layout>
    `;
  }
}


declare global {
  interface HTMLElementTagNameMap {
    'checkbox-indeterminate': CheckboxIndeterminate;
  }
}

这是getPeople() 方法。

import { Person } from './person';

export async function getPeople(): Promise<Person[]> {
  return [
    new Person(1, "Aria", "Bailey"),
    new Person(2, "Aaliyah", "Butler"),
    new Person(3, "Eleanor", "Price")
  ]
}

这是Person 班级。

export class Person {
  id: number;
  firstName: string;
  lastName: string;

  constructor(id: number, firstName: string, lastName: string) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

【问题讨论】：

getPeople() 返回什么？在文档中的示例中，它返回一个具有 people 属性的对象，该属性已被破坏 (const { people } = ...)，然后分配给 items 属性 (this.items = people)。您的示例缺少此步骤，但尚不清楚这是实际遗漏还是有意为之，因为您的 getPeople() 返回了不同的内容。
在文档中的示例中，export async function getPeople(): Promise<PeopleResult> 返回一个名为PeopleResult 的对象，其中包含Person 的数组和hierarchyLevelSize 的编号。 checkbox-indeterminate 样本不需要hierarchyLevelSize，所以我创建的getPeople() 返回一个Person 数组。这个方法是export async function getPeople(): Promise<Person[]>。我制作的getProple() 只返回一个包含 3 个人的数组。
您是否检查了firstUpdated 日志消息以确认getPeople() 实际上返回了一个包含三个人对象数组的Promise？我尝试运行您的代码示例，但使用我自己的简单实现 getPeople()，因为您没有分享您的代码，而且它似乎完全符合我的预期。如果我将其更改为数组为空，则浏览器控制台中将出现错误，并且复选框组将不会像您描述的那样显示。
感谢您的尝试。我很抱歉没有解释。我在问题中包含了我的 getPeople() 方法。在控制台日志中，首先调用了render()方法，items为空。之后调用firstUpdated()方法，items里面有三个值。但是，列表不会在屏幕上输出。
对不起。我找到了原因。我在tsconfig.json 中犯了一个错误。我为target 指定了ESNext，所以它没有输出到屏幕上。非常感谢您的尝试。

标签： vaadin lit

【解决方案1】：

对不起。我找到了原因。我在 tsconfig.json 中犯了一个错误。我已经为目标指定了 ESNext，所以它没有输出到屏幕上。

【讨论】：