初始化前无法访问“variable_name”

Posted 2023-02-19

【中文标题】初始化前无法访问“variable_name”

【英文标题】：Cannot access 'variable_name' before initialization

【发布时间】：2019-10-12 13:55:54

【问题描述】：

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

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"]

【参考方案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 新手分享。

【讨论】：

请注意，在此示例中，您根本不需要使用 $:，因为 ledzep 和 redhotchilis 不是反应变量（从另一个模块导入的值被带到保持不变）