一旦遇到未定义的变量，反应式语句就会抛出错误。如何预防？

Question

只是玩玩 Svelte。而且我注意到，当计算反应式语句 ($) 时，当依赖变量之一未定义时，它会抛出错误。

虽然这种行为是正确的，但如果它所依赖的变量未定义，我如何才能阻止它计算？

要查看错误，请在任一字段中键入内容，然后将其删除，使其变为空。

<script>
    let num = "";
    let secondNum = "";

    $: output = "prefix" + num.toString() + secondNum.toString() + "suffix";

    function handleChange() {
        console.log(num, secondNum);
    }

    function handleSubmit(e) {
        e.preventDefault();

    }

</script>
<form on:submit={handleSubmit}>
    <input type="number" bind:value={num} on:change={handleChange}>
    <input type="number" bind:value={secondNum} on:change={handleChange}>
    <button type="submit">
        Submit
    </button>
</form>

Answer 1

清除数字输入会导致其绑定值为 undefined。如果 num 未定义，则 num.toString() 是一个错误（那是 JavaScript 的东西，不是 Svelte 的东西）。

最简单的解决方法是：

$: output = `prefix${num || ''}${secondNum || ''}suffix`;

一旦遇到未定义的变量，反应式语句就会抛出错误。如何预防？

Reactive statement throws an error once it hits undefined variables. How to prevent it?

undefined

reactive

svelte