时间戳

首页 > 解决方案 > Sapper：当导航离开带有 kwes.io 表单的页面时，如何修复“parentNode 为空”？

svelte - Sapper：当导航离开带有 kwes.io 表单的页面时，如何修复“parentNode 为空”？

问题描述

我正在 SapperJS 中使用kwes.io创建一个联系表单。表格本身有效。

但是一旦我登陆联系页面，我就无法使用 Sapper 链接离开它，但正常的 https 链接可以工作。

浏览器中的 URL 更改，但内容未加载。然后要加载内容，我必须重新加载页面。

我联系了 Kwes 的支持团队，但他们说这与 Sapper 处理路由的方式有关，无法提供帮助。

我像这样创建了我的表格

<svelte:head>
  <script src="https://kwes.io/js/kwes.js"></script>
</svelte:head>


<div class="kwes-form">
    <form method="POST" action="https://kwes.io/api/foreign/forms/YOUR_FORM_KEY">
        <label for="name">Your Name</label>
        <input type="text" name="name">
        <button type="submit">Submit</button>
    </form>
</div>

在 Chrome 浏览器控制台上打印

Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null

在 Firefox 控制台上

TypeError: t.parentNode is null

标签： sveltesapper

解决方案

最近遇到了这个错误。就我而言，这是由于另一个库更改了 DOM。（就我而言，字体很棒）

调试

我通过在发生错误的地方放置一个断点来调试它

function detach(node) {
    if (!node.parentNode) debugger; // added breakpoint
    node.parentNode.removeChild(node);
}

我弄清楚是哪个节点导致了错误，并看到它确实不再在 DOM 中（fontawesome 已将其替换为<svg>标签）

解决方案

我的解决方案是将节点包装在另一个节点中。因此，svelte 不依赖于被替换的节点。

前

{#if condition}
  <span class="fa fa-check"/>
{/if}

后

{#if condition}
  <span>
    <span class="fa fa-check"/>
  </span>
{/if}

推荐阅读