Blazor Web应用测试过滤输入框时出现NullReferenceException异常求助

错误原因 #

你遇到的System.NullReferenceException是因为：

• skill数组仅声明但未初始化，页面渲染时尝试绑定skill[0]直接触发空引用
• ApplyFilter方法中直接访问skill[1]、skill[2]，即使数组初始化后，若长度不足也会引发索引越界

修复步骤 #

1. 初始化skill数组 #

在组件代码中给skill数组分配足够空间，对应你最多允许3个skill输入框的需求：

private int skillFilterStatus = 0;
private string lastname;
private string company;
// 初始化数组，长度设为3，支持最多3个skill输入
private string[] skill = new string[3];

2. 补充FilterClick和FilterMinus方法 #

实现控制skill输入框数量的方法，同时避免索引越界：

private void FilterClick()
{
    // 最多添加2个额外skill输入框
    if (skillFilterStatus < 2)
    {
        skillFilterStatus++;
    }
}

private void FilterMinus()
{
    if (skillFilterStatus > 0)
    {
        skillFilterStatus--;
        // 清空移除的输入框值
        skill[skillFilterStatus + 1] = null;
    }
}

3. 安全访问数组元素 #

修改ApplyFilter方法，避免直接访问可能不存在的数组索引：

private void ApplyFilter()
{
    var skill0 = skill.Length > 0 ? skill[0] : string.Empty;
    var skill1 = skill.Length > 1 ? skill[1] : string.Empty;
    var skill2 = skill.Length > 2 ? skill[2] : string.Empty;
    
    Console.WriteLine($"{lastname}-{company}-{skill0}-{skill1}-{skill2}");
}

4. 修正HTML中的语法问题 #

• 修复BSLabel的style属性写法（将width=20%改为width:20%）
• 调整循环条件为i <= skillFilterStatus，确保点击加号后正确渲染新的输入框

修正后的HTML片段：

<!--Input fields for filtering-->
<div style="display:flex">
    <div class="filter">
        <BSLabel style="width:20%">Lastname: </BSLabel>
        <BSInput InputType="InputType.Text" placeholder="name" @bind-Value="lastname" />
    </div>
    <div class="filter">
        <BSLabel style="width:20%">Company: </BSLabel>
        <BSInput InputType="InputType.Text" placeholder="Company" @bind-Value="company"/>
    </div>
    <div class="filter">
        <BSLabel style="width:20%">Skill: </BSLabel>
        <BSInput InputType="InputType.Text" placeholder="Skill" @bind-Value="skill[0]"/>
    </div>
    @for (int i = 1; i <= skillFilterStatus; i++)
    {
        <div class="filter">
            <BSLabel style="width:20%">Skill: </BSLabel>
            <BSInput InputType="InputType.Text" placeholder="Skill" @bind-Value="skill[i]"/>
        </div>
    }
    @if(skillFilterStatus != 0)
    {
        <div class="filterBttn">
            <BSButton style="background-color: #ed1c24;" @onclick="FilterMinus"><i class="oi oi-minus" style="color: white" ></i></BSButton>
        </div>        
    }
    @if(skillFilterStatus < 2)
    {
        <div class="filterBttn">
            <BSButton style="background-color: #8522e4;" @onclick="FilterClick"><i class="oi oi-plus" style="color: white" ></i></BSButton>
        </div>
    }
    <div class="filterBttn">
        <BSButton @onclick="ApplyFilter" style="background-color: #8522e4; color: white">Apply</BSButton>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Zachhhh