render() - 函数没有更新 DOM

问题描述

我对 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 清空我的容器，然后调用渲染函数，但是没有用。

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lit-html

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

问题描述

解决方法