初始化前无法访问 'variable_name'

Question

当使用 $: 语法声明响应式变量时，会出现以下错误。

Cannot access 'variable_name' before initialization

代码如下：

App.svelte

<script>
    import { ledzep, redhotchilis } from './data.js'
    
    $: bandmembers = [...ledzep, ...redhotchilis]
    
    let namesWithA = bandmembers.filter(d => {
            if (d.indexOf('a') > 0) {               
                return true;
            }
        else {
            return false
        }
    })
    
</script>
<h2>Band Members</h2>
<ul>
{#each bandmembers as member}
    <li>{member}</li>
{/each}
</ul>

<h2>Members with "A" in their names</h2>
<ul>
{#each namesWithA as member}
    <li>{member}</li>
{/each}
</ul>

data.js

export const ledzep = ["Jimmy Page", "John Bonham", "Robert Plant", "John Paul Jones"]
export const redhotchilis = ["Anthony Kiedis", "Flea", "Chad Smith", "Josh Klinghoffer"]

Answer 1

当您使用 $: 分配变量时，您不能将它们分配为使用 let、const 或 var 声明的其他变量的一部分。

当您使用 $: 进行赋值时，您只能在使用 $: 赋值的其他变量中使用它们。在上面发布的代码中，您需要更改以下行：

let namesWithA = bandmembers.filter(d => {
            if (d.indexOf('a') > 0) {               
                return true;
            }
        else {
            return false
        }
    })

以下内容：

$: namesWithA = bandmembers.filter(d => {
            if (d.indexOf('a') > 0) {               
                return true;
            }
        else {
            return false
        }
    })

我花了一段时间才弄明白这一点，只是想与其他 Svelte 刚开始使用这项新技术的新手分享。