render() - 函数没有更新 DOM - lit-html

如何解决render() - 函数没有更新 DOM - lit-html

我对 lit-html 渲染功能有疑问。 目前我遇到的问题是有时渲染函数不更新 DOM。

我的渲染函数如下所示：

public renderLootbag = (_characterItems: Object): void => {
  //some other code
  const lootbagInventoryTemplate: TemplateResult[] = [];

  for (let i: number = 0; i < numberOfInventorySpaces; i++) {
    lootbagInventoryTemplate.push(html` 
      <section class="lootbag__inventoryItem">
      //some other code 
      </section>
    `)
  };

  const lootbagTemplate: TemplateResult = html`
    //some other code
    <section class="lootbag__inventory">${lootbagInventoryTemplate} 
    </section>
  `;

  console.log(lootbagInventoryTemplate);
  render(lootbagTemplate,getLootbagContainer);
}

每次我点击一个名为“打开 Lootbag”的按钮时都会触发这个函数

现在的问题是：如果 renderLootbag() 函数中的参数值发生变化，DOM 不会更新，即使 console.log(lootbagInventoryTemplate) 向我显示了新值... :/.

img of the console.log

img of the dom

注意：在这种情况下，类“lootbag__itemData”的元素不应填充内容。

有没有办法完全强制进行新的渲染？，我已经尝试用 innerHTML 清空我的容器，然后调用渲染函数，但是没有用。

提前致谢

解决方法

我有一个类似的问题，输入没有一直更新。 潜在的问题是我将所有来自用户的输入转换为数字，如果用户输入一些字母，它会回落到零。 由于值并不总是改变（零变为零），点亮的 html 不会重新渲染。

解决方案使用了指令。

import { html,render,directive } from "lit-html";

const value = store.savedValueFromInput;

const forceWrite = directive((someValue) => (part) => {
        part.setValue(someValue);
    });

<input type="number" @change="${setValueFromInput}" .value="${forceWrite(value)}" />

这应该会强制重新渲染。

最好的问候， 特里斯坦