如何强制更新子组件？

Question

Lit Documentation says:

When called with no arguments, requestUpdate() schedules an update, without calling a hasChanged() function. But note that requestUpdate() only causes the current component to update. That is, if a component uses the code shown above, and the component passes this.myArray to a subcomponent, the subcomponent will detect that the array reference hasn't changed, so it won't update.

So how to force an update of a subcomponent (even if the subcomponent's attribute doesn't change)?

render() {
  return html`
    <ul>
      ${this.myArray.map(
        (item) => html`
          <li>
            ${item.text}
            <my-subcomponent foo="${item.bar}"></my-subcomponent>
          </li>
        `
      )}
    </ul>
  `;
}

Edit: Repro in Lit Playground

Answer 1

创建this.myArray的克隆以强制子组件重新渲染

 this.myArray = [...this.myArray]

Answer 2

Thank you for the lit.dev playground repro, I was able to identify some issues that should resolve your issue.

Before jumping into the various fixes, why is the subcomponent not re-rendering? LitElements render as a function of their properties & state. If properties don't change, they don't re-render.

The subcomponent has two reactive properties, myArray and id . myArray is only set once on construction from localstorage and never updated - so it will never trigger an update. The id number also never changes for a given subcomponent so will never trigger an update. Because neither properties change, the subcomponent doesn't re-render.

Option 1: Pass the new array to the sub-component.

Fix 1 in Lit Playground

The only change I've made is to pass myArray to sub-component explicitly, (note .myArray=${this.myArray} ):

<li>${item.text} (<sub-component id=${item.id}.myArray=${this.myArray}></sub-component>)</li>

This works because now when the parent updates this.myArray , the parent passes this new array to the sub-component. The sub-component then notices that the reactive property myArray has changed and a render is scheduled.

Option 2: Only pass the item to the sub-component

This is a larger change, but more maintainable and simpler. Instead of passing both the array and item id to each sub-component, only pass the item that the sub-component cares about.

This does less work on the sub-component because each sub-component doesn't need to loop through the whole array to find the element that it cares about.

Working fixed playground from repro .

This approach requires a change in changeMyArray . Instead of mutating the items, new items need to be returned.

  changeMyArray() {
    this.myArray = this.myArray.map(
      (item) => {
        return {...item, colored: !item.colored};
      }
    );
  }

Breaking down that example. this.myArray.map already returns a new array so the array spread is not required. Within the map each item that is modified must return a new object. This is similar to how redux works and the linked article may provide more helpful details.

Now the parent render function can be updated to pass the item directly to the subcomponent with: <li>${item.text} (<sub-component.item=${item}></sub-component>)</li> .

Now when the item changes, the sub-component automatically re-renders.